/**************************************
 * VLOOK CSS 基础库
 *
 * V10.7.1
 * 2021-08-02
 * powered by MAX°孟兆
 *
 * QQ Group: 805502564
 * email: maxchow@qq.com
 *
 * https://github.com/MadMaxChow/VLOOK
 *
 *************************************/

/**************************************
 自定义 UI 元素层叠次序

---------- 云顶 UI 区 ----------

欢迎页 / .mdx-welcome-page / z-index: 6000;

底部信息栏 / .mdx-bottom-tips / z-index: 5001;
聚光灯 / .mdx-spotlight / z-index: 5000;

---------- 高优先信息 UI 区 -----

无效链接清单 / .mdx-link-error-list / z-index: 4500;
工具栏提示、弹窗提示、字体风格切换 / .mdx-tool-tips, .mdx-info-tips, .mdx-font-styler / z-index: 3000;

---------- 二级 UI 区 ----------

插图导航 / .mdx-figure-nav / z-index: 2200;
脚注面板 / .mdx-foot-note-panel / z-index: 2100;
导航中心收起/展开引导把手 / .mdx-toc-handle / z-index: 2000;
导航中心面板 / .mdx-nav-center / z-index: 2000;
    导航中心头部 / .mdx-nav-center-header / z-index: 10;
    导航中心脚部 / .mdx-nav-center-footer / z-index: 10;

---------- UI 间隔区 ----------

遮罩 / .mdx-mask / z-index: 1000;
画中画 / .mdx-pic-in-pic / z-index: 500;

---------- 增强工具操作区 ----------

Mermaid工具提示 / div.mermaidTooltip / z-index: 100;
工具栏 / .mdx-toolbar / z-index: 100;
状态栏 / .mdx-status-bar / z-index: 100;
逐章导航面板 / .mdx-chapter-nav / z-index: 100;
文档更多内容遮挡栏 / .mdx-more-doc-content-before, .mdx-more-doc-content-after / z-index: 99;

---------- 文档内容交互区 ----------

在新标签中打开按钮 / .mdx-btn-open-in-new-tab / z-index: 50;
内容辅助操作栏 / .mdx-content-assist-bar / z-index: 50;
内容展开操作区 / .mdx-content-expander / z-index: 10;

导航中心内的分段控制按钮 .mdx-segment-indicator / z-index: 10
导航中心内的当前分段选择指示器 .mdx-segment-indicator / z-index: 0

**************************************/

// @import url("https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css");
// @include-when-export url("https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css");

// VLOOK Logo
// @vlookLogo: "";

//---
// Light Mode 时图片的非网格背景
@figureSolidBgLight: #FFFFFF;
// Light Mode 时图片的网格背景
@figureGridLineLight: "";
@figureGridBlockLight: "";
//---
// Dark Mode 时图片的非网格背景
@figureSolidBgDark: #000000;
// Dark Mode 时图片的网格背景
@figureGridLineDark: "";
@figureGridBlockDark: "";
// Dark Mode 时反色的图片网格背景
@figureGridLineDarkInvert: "";
@figureGridBlockDarkInvert: "";

:root {
    --mm-sequence-numbers: on;
    --mm-flowchart-curve: basis;

    --vlook-theme-name: @themeName; // 主题名称
    --vlook-theme-version: "V10.7.1"; // 主题版本，对应适配 VLOOK.JS 的版本
    --vlook-default-font-style: @defaultFontStyle; // 默认字体风格
    --vlook-color-scheme: light; // 默认颜色模式为：Light 明亮

    // 导航中心、工具栏相关 UI 尺寸
    --vlook-nav-center-width:360px;
    --vlook-nav-center-hidden-left:-370px;
    --vlook-toolbar-btn-width:36px;
    --vlook-toolbar-btn-space:5px;
    --vlook-top-margin:8px;

    // 过渡效果设置
    --vlook-transition-duration: 200ms;
    --vlook-transition-value: all var(--vlook-transition-duration) ease-in-out;

    // 圆角配置
    --vlook-base-radius:@baseRadius; // 标准圆角
    --vlook-small-radius:@smallRadius; // 标准圆角内的小圆角
    --vlook-table-radius:@tableRadius; // 表格圆角
    --vlook-small-inner-radius:calc(var(--vlook-table-radius) - 2px); // 标准圆角内的小圆角
    --vlook-tag-radius:@tagRadius; // 标签圆角
    --vlook-tag-small-radius:@tagSmallRadius; // 标签小圆角
    --vlook-circle-radius:@circleRadius; // 半距圆角

    // --------------------
    // Light 模式的颜色值
    --vlook-invert-dark-light: invert(0) brightness(100%); // Light 模式下图片滤镜
    --vlook-brightness-dark-light: brightness(100%); // Light 模式下封面、封底的滤镜
    --doc-bg-color-light: @docBgColorLight;
    --doc-bg-color-alt-light: @docBgColorLightAlt;
    --doc-bg-color-transparent-light: fade(@docBgColorLight, 0%);
    --doc-bg-color-alt-transparent-light: fade(@docBgColorLightAlt, 0%);
    --fore-color-light: @foreColorLight;
    --fore-color-alt-light: @foreColorLightAlt;

    // --backdrop-blurs-bg-light : radial-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5));

    --blockquote-color-light: fade(@foreColorLight, 20%);
    --blockquote-bg-light: fade(@foreColorLight, 10%);
    --tips-bg-color-light: @foreColorDark;
    --tips-bg-color-inset-light: @foreColorLight;
    --a-color-light: @aColor;
    --mark-color-light: rgba(255, 192, 32, 0.35);
    --tbl-border-color-light: @tableBorderColor;
    --tbl-header-color-light: @tableHeaderColor;
    --tbl-th-bg-color-light: @tableThBgColor;
    --tbl-td-bg-color-light: @tableTdBgColor;
    --tbl-cell-border-color-light: @tableCellBorderColor;
    --tbl-row-g-alpha-light: 0.15;
    --del-color-light: @foreColorLightAlt;
    --toc-header-num-color-light: @tocHeaderNumColor;
    --header-color-light: @headerColor;
    --header-box-shadow-light: fade(@headerColor, 20%);
    --header-bg-start-color-light: fade(@headerColor, 0%);
    --header-bg-end-color-light: fade(@headerColor, 10%);
    --code-bg-color-light: @codeBgColor;
    --code-name-bg-color-light: @foreColorLight;
    --code-name-shadow-color-light: rgba(0, 0, 0, 0.3);

    --acc-color-red-light: @accColorRed;
    --acc-color-red-alt-light: @accColorRedAlt;
    --acc-color-red-fade-light: fade(@accColorRed, 25%);
    --acc-color-red-title-light: @accColorRed;
    --acc-color-orange-light: @accColorOrange;
    --acc-color-orange-alt-light: @accColorOrangeAlt;
    --acc-color-orange-fade-light: fade(@accColorOrange, 25%);
    --acc-color-orange-title-light: @accColorOrange;
    --acc-color-yellow-light: @accColorYellow;
    --acc-color-yellow-alt-light: @accColorYellowAlt;
    --acc-color-yellow-fade-light: fade(@accColorYellow, 25%);
    --acc-color-yellow-title-light: @accColorYellow;
    --acc-color-green-light: @accColorGreen;
    --acc-color-green-alt-light: @accColorGreenAlt;
    --acc-color-green-fade-light: fade(@accColorGreen, 25%);
    --acc-color-green-title-light: @accColorGreen;
    --acc-color-cyan-light: @accColorCyan;
    --acc-color-cyan-alt-light: @accColorCyanAlt;
    --acc-color-cyan-fade-light: fade(@accColorCyan, 25%);
    --acc-color-cyan-title-light: @accColorCyan;
    --acc-color-blue-light: @accColorBlue;
    --acc-color-blue-alt-light: @accColorBlueAlt;
    --acc-color-blue-fade-light: fade(@accColorBlue, 25%);
    --acc-color-blue-title-light: @accColorBlue;
    --acc-color-purple-light: @accColorPurple;
    --acc-color-purple-alt-light: @accColorPurpleAlt;
    --acc-color-purple-fade-light: fade(@accColorPurple, 25%);
    --acc-color-purple-title-light: @accColorPurple;
    --acc-color-pink-light: @accColorPink;
    --acc-color-pink-alt-light: @accColorPinkAlt;
    --acc-color-pink-fade-light: fade(@accColorPink, 25%);
    --acc-color-pink-title-light: @accColorPink;
    --acc-color-brown-light: @accColorBrown;
    --acc-color-brown-alt-light: @accColorBrownAlt;
    --acc-color-brown-fade-light: fade(@accColorBrown, 25%);
    --acc-color-brown-title-light: @accColorBrown;
    --acc-color-gray-light: @accColorGray;
    --acc-color-gray-alt-light: @accColorGrayAlt;
    --acc-color-gray-fade-light: fade(@accColorGray, 25%);
    --acc-color-gray-title-light: @accColorGray;
    --acc-color-theme1-light: @theme1;
    --acc-color-theme1-alt-light: @theme1Alt;
    --acc-color-theme1-fade-light: fade(@theme1, 30%);
    --acc-color-theme1-title-light: @theme1;
    --acc-color-theme2-light: @theme2;
    --acc-color-theme2-alt-light: @theme2Alt;
    --acc-color-theme2-fade-light: fade(@theme2, 30%);
    --acc-color-theme2-title-light: @theme2;

    --mm-color-red-light: @mmColorRed;
    --mm-color-red-alt-light: @mmColorRedAlt;
    --mm-color-orange-light: @mmColorOrange;
    --mm-color-orange-alt-light: @mmColorOrangeAlt;
    --mm-color-yellow-light: @mmColorYellow;
    --mm-color-yellow-alt-light: @mmColorYellowAlt;
    --mm-color-green-light: @mmColorGreen;
    --mm-color-green-alt-light: @mmColorGreenAlt;
    --mm-color-cyan-light: @mmColorCyan;
    --mm-color-cyan-alt-light: @mmColorCyanAlt;
    --mm-color-blue-light: @mmColorBlue;
    --mm-color-blue-alt-light: @mmColorBlueAlt;
    --mm-color-purple-light: @mmColorPurple;
    --mm-color-purple-alt-light: @mmColorPurpleAlt;
    --mm-color-pink-light: @mmColorPink;
    --mm-color-pink-alt-light: @mmColorPinkAlt;
    --mm-color-brown-light: @mmColorBrown;
    --mm-color-brown-alt-light: @mmColorBrownAlt;
    --mm-color-gray-light: @mmColorGray;
    --mm-color-gray-alt-light: @mmColorGrayAlt;
    --cm-keyword-light: #770088;
    --cm-variable-light: @foreColorLight;
    --cm-variable-2-light: #0055AA;
    --cm-variable-3-light: #008855;
    --cm-tag-light: #117700;
    --cm-attribute-light: #0000CC;
    --cm-CodeMirror-cursor-light: @foreColorLightAlt;
    --cm-string-light: #AA1111;
    --cm-string-2-light: #FF5500;
    --cm-comment-light: #AA5500;
    --cm-header-light: #0000FF;
    --cm-quote-light: #009900;
    --cm-hr-light: #999999;
    --cm-link-light: #0000CC;
    --cm-negative-light: #DD4444;
    --cm-positive-light: #229922;
    --cm-meta-light: #555555;
    --cm-bulidin-light: #3300AA;
    --cm-bracket-light: #999977;
    --cm-atom-light: #221199;
    --cm-number-light: #116644;

    // --------------------
    // Dark Mode的颜色值
    --vlook-invert-dark-dark: invert(1) brightness(90%); // Dark Mode下图片滤镜
    --vlook-brightness-dark-dark: brightness(90%); // Dark Mode下封面、封底的滤镜
    --doc-bg-color-dark: @docBgColorDark;
    --doc-bg-color-alt-dark: @docBgColorDarkAlt;
    --doc-bg-color-transparent-dark: fade(@docBgColorDark, 0%);
    --doc-bg-color-alt-transparent-dark: fade(@docBgColorDarkAlt, 0%);
    --fore-color-dark: @foreColorDark;
    --fore-color-alt-dark: @foreColorDarkAlt;

    // --backdrop-blurs-bg-dark : radial-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.5));

    --blockquote-color-dark: fade(@foreColorDark, 20%);
    --blockquote-bg-dark: fade(@foreColorDark, 10%);
    --tips-bg-color-dark: @docBgColorDarkAlt;
    --tips-bg-color-inset-dark: @foreColorDark;
    --a-color-dark: @aColorDark;
    --mark-color-dark: rgba(255, 192, 32, 0.25);
    --tbl-border-color-dark: @tableBorderColorDark;
    --tbl-header-color-dark: @tableHeaderColorDark;
    --tbl-th-bg-color-dark: @tableThBgColorDark;
    --tbl-td-bg-color-dark: @tableTdBgColorDark;
    --tbl-cell-border-color-dark: @tableCellBorderColorDark;
    --tbl-row-g-alpha-dark: 0.3;
    --del-color-dark: darken(@foreColorDark, 20%);
    --toc-header-num-color-dark: fade(@foreColorDark, 50%);
    --header-color-dark: @headerColorDark;
    --header-box-shadow-dark: fade(@headerColorDark, 20%);
    --header-bg-start-color-dark: fade(@headerColorDark, 0%);
    --header-bg-end-color-dark: fade(@headerColorDark, 15%);
    --code-bg-color-dark: @codeBgColorDark;
    --code-name-bg-color-dark: @foreColorDark;
    --code-name-shadow-color-dark: rgba(255, 255, 255, 0.3);

    --acc-color-red-dark: @accColorRedDark;
    --acc-color-red-alt-dark: @accColorRedAltDark;
    --acc-color-red-fade-dark: fade(@accColorRed, 35%);
    --acc-color-red-title-dark: #FFFFFF;
    --acc-color-yellow-dark: @accColorYellowDark;
    --acc-color-yellow-alt-dark: @accColorYellowAltDark;
    --acc-color-yellow-fade-dark: fade(@accColorYellow, 35%);
    --acc-color-yellow-title-dark: #FFFFFF;
    --acc-color-orange-dark: @accColorOrangeDark;
    --acc-color-orange-alt-dark: @accColorOrangeAltDark;
    --acc-color-orange-fade-dark: fade(@accColorOrange, 35%);
    --acc-color-orange-title-dark: #FFFFFF;
    --acc-color-green-dark: @accColorGreenDark;
    --acc-color-green-alt-dark: @accColorGreenAltDark;
    --acc-color-green-fade-dark: fade(@accColorGreen, 35%);
    --acc-color-green-title-dark: #FFFFFF;
    --acc-color-cyan-dark: @accColorCyanDark;
    --acc-color-cyan-alt-dark: @accColorCyanAltDark;
    --acc-color-cyan-fade-dark: fade(@accColorCyan, 35%);
    --acc-color-cyan-title-dark: #FFFFFF;
    --acc-color-blue-dark: @accColorBlueDark;
    --acc-color-blue-alt-dark: @accColorBlueAltDark;
    --acc-color-blue-fade-dark: fade(@accColorBlue, 35%);
    --acc-color-blue-title-dark: #FFFFFF;
    --acc-color-purple-dark: @accColorPurpleDark;
    --acc-color-purple-alt-dark: @accColorPurpleAltDark;
    --acc-color-purple-fade-dark: fade(@accColorPurple, 35%);
    --acc-color-purple-title-dark: #FFFFFF;
    --acc-color-pink-dark: @accColorPinkDark;
    --acc-color-pink-alt-dark: @accColorPinkAltDark;
    --acc-color-pink-fade-dark: fade(@accColorPink, 35%);
    --acc-color-pink-title-dark: #FFFFFF;
    --acc-color-brown-dark: @accColorBrownDark;
    --acc-color-brown-alt-dark: @accColorBrownAltDark;
    --acc-color-brown-fade-dark: fade(@accColorBrown, 35%);
    --acc-color-brown-title-dark: #FFFFFF;
    --acc-color-gray-dark: @accColorGrayDark;
    --acc-color-gray-alt-dark: @accColorGrayAltDark;
    --acc-color-gray-fade-dark: fade(@accColorGray, 35%);
    --acc-color-gray-title-dark: #FFFFFF;
    --acc-color-theme1-dark: @theme1Dark;
    --acc-color-theme1-alt-dark: @theme1AltDark;
    --acc-color-theme1-fade-dark: fade(@theme1Dark, 30%);
    --acc-color-theme1-title-dark: #FFFFFF;
    --acc-color-theme2-dark: @theme2Dark;
    --acc-color-theme2-alt-dark: @theme2AltDark;
    --acc-color-theme2-fade-dark: fade(@theme2Dark, 30%);
    --acc-color-theme2-title-dark: #FFFFFF;

    --mm-color-red-dark: @mmColorRedAlt;
    --mm-color-red-alt-dark: @mmColorRed;
    --mm-color-orange-dark: @mmColorOrangeAlt;
    --mm-color-orange-alt-dark: @mmColorOrange;
    --mm-color-yellow-dark: @mmColorYellowAlt;
    --mm-color-yellow-alt-dark: @mmColorYellow;
    --mm-color-green-dark: @mmColorGreenAlt;
    --mm-color-green-alt-dark: @mmColorGreen;
    --mm-color-cyan-dark: @mmColorCyanAlt;
    --mm-color-cyan-alt-dark: @mmColorCyan;
    --mm-color-blue-dark: @mmColorBlueAlt;
    --mm-color-blue-alt-dark: @mmColorBlue;
    --mm-color-purple-dark: @mmColorPurpleAlt;
    --mm-color-purple-alt-dark: @mmColorPurple;
    --mm-color-pink-dark: @mmColorPinkAlt;
    --mm-color-pink-alt-dark: @mmColorPink;
    --mm-color-brown-dark: @mmColorBrownAlt;
    --mm-color-brown-alt-dark: @mmColorBrown;
    --mm-color-gray-dark: @mmColorGrayAlt;
    --mm-color-gray-alt-dark: @mmColorGray;
    --cm-keyword-dark: #C88FD0;
    --cm-variable-dark: @foreColorDark;
    --cm-variable-2-dark: #9FBAD5;
    --cm-variable-3-dark: #1CC685;
    --cm-tag-dark: #7DF46A;
    --cm-attribute-dark: #7575E4;
    --cm-CodeMirror-cursor-dark: @foreColorDarkAlt;
    --cm-string-dark: #D26B6B;
    --cm-string-2-dark: #FF5500;
    --cm-comment-dark: #DA924A;
    --cm-header-dark: #8D8DF0;
    --cm-quote-dark: #57AC57;
    --cm-hr-dark: #D8D5D5;
    --cm-link-dark: #D3D3EF;
    --cm-negative-dark: #D95050;
    --cm-positive-dark: #50E650;
    --cm-meta-dark: #B7B3B3;
    --cm-buliddark: #F3B3F8;
    --cm-bracket-dark: #999977;
    --cm-atom-dark: #84B6CB;
    --cm-number-dark: #64AB8F;

    // --------------------
    // 颜色变量
    --vlook-invert-dark: var(--vlook-invert-dark-light); // 默认的图片滤镜
    --vlook-brightness-dark: var(--vlook-brightness-dark-light); // 默认的封面、封底滤镜
    --doc-bg-color: var(--doc-bg-color-light);
    --doc-bg-color-alt: var(--doc-bg-color-alt-light);
    --doc-bg-color-transparent: var(--doc-bg-color-transparent-light);
    --doc-bg-color-alt-transparent: var(--doc-bg-color-alt-transparent-light);
    --fore-color: var(--fore-color-light);
    --fore-color-alt: var(--fore-color-alt-light);

    // --backdrop-blurs-bg : var(--backdrop-blurs-bg-light);

    --blockquote-color: var(--blockquote-color-light);
    --blockquote-bg: var(--blockquote-bg-light);
    --tips-bg-color: var(--tips-bg-color-light);
    --tips-bg-color-inset: var(--tips-bg-color-inset-light);
    --a-color: var(--a-color-light);
    --mark-color: var(--mark-color-light);
    --tbl-border-color: var(--tbl-border-color-light);
    --tbl-header-color: var(--tbl-header-color-light);
    --tbl-th-bg-color: var(--tbl-th-bg-color-light);
    --tbl-td-bg-color: var(--tbl-td-bg-color-light);
    --tbl-cell-border-color: var(--tbl-cell-border-color-light);
    --tbl-row-g-alpha: var(--tbl-row-g-alpha-light);
    --del-color: var(--del-color-light);
    --toc-header-num-color: var(--toc-header-num-color-light);
    --header-color: var(--header-color-light);
    --header-box-shadow: var(--header-box-shadow-light);
    --header-bg-start-color: var(--header-bg-start-color-light);
    --header-bg-end-color: var(--header-bg-end-color-light);
    --code-bg-color: var(--code-bg-color-light);
    --code-name-bg-color: var(--code-name-bg-color-light);
    --code-name-shadow-color: var(--code-name-shadow-color-light);

    --acc-color-red: var(--acc-color-red-light);
    --acc-color-red-alt: var(--acc-color-red-alt-light);
    --acc-color-red-fade: var(--acc-color-red-fade-light);
    --acc-color-red-title: var(--acc-color-red-title-light);
    --acc-color-orange: var(--acc-color-orange-light);
    --acc-color-orange-alt: var(--acc-color-orange-alt-light);
    --acc-color-orange-fade: var(--acc-color-orange-fade-light);
    --acc-color-orange-title: var(--acc-color-orange-title-light);
    --acc-color-yellow: var(--acc-color-yellow-light);
    --acc-color-yellow-alt: var(--acc-color-yellow-alt-light);
    --acc-color-yellow-fade: var(--acc-color-yellow-fade-light);
    --acc-color-yellow-title: var(--acc-color-yellow-title-light);
    --acc-color-green: var(--acc-color-green-light);
    --acc-color-green-alt: var(--acc-color-green-alt-light);
    --acc-color-green-fade: var(--acc-color-green-fade-light);
    --acc-color-green-title: var(--acc-color-green-title-light);
    --acc-color-cyan: var(--acc-color-cyan-light);
    --acc-color-cyan-alt: var(--acc-color-cyan-alt-light);
    --acc-color-cyan-fade: var(--acc-color-cyan-fade-light);
    --acc-color-cyan-title: var(--acc-color-cyan-title-light);
    --acc-color-blue: var(--acc-color-blue-light);
    --acc-color-blue-alt: var(--acc-color-blue-alt-light);
    --acc-color-blue-fade: var(--acc-color-blue-fade-light);
    --acc-color-blue-title: var(--acc-color-blue-title-light);
    --acc-color-purple: var(--acc-color-purple-light);
    --acc-color-purple-alt: var(--acc-color-purple-alt-light);
    --acc-color-purple-fade: var(--acc-color-purple-fade-light);
    --acc-color-purple-title: var(--acc-color-purple-title-light);
    --acc-color-pink: var(--acc-color-pink-light);
    --acc-color-pink-alt: var(--acc-color-pink-alt-light);
    --acc-color-pink-fade: var(--acc-color-pink-fade-light);
    --acc-color-pink-title: var(--acc-color-pink-title-light);
    --acc-color-brown: var(--acc-color-brown-light);
    --acc-color-brown-alt: var(--acc-color-brown-alt-light);
    --acc-color-brown-fade: var(--acc-color-brown-fade-light);
    --acc-color-brown-title: var(--acc-color-brown-title-light);
    --acc-color-gray: var(--acc-color-gray-light);
    --acc-color-gray-alt: var(--acc-color-gray-alt-light);
    --acc-color-gray-fade: var(--acc-color-gray-fade-light);
    --acc-color-gray-title: var(--acc-color-gray-title-light);
    --acc-color-theme1: var(--acc-color-theme1-light);
    --acc-color-theme1-alt: var(--acc-color-theme1-alt-light);
    --acc-color-theme1-fade: var(--acc-color-theme1-fade-light);
    --acc-color-theme1-title: var(--acc-color-theme1-title-light);
    --acc-color-theme2: var(--acc-color-theme2-light);
    --acc-color-theme2-alt: var(--acc-color-theme2-alt-light);
    --acc-color-theme2-fade: var(--acc-color-theme2-fade-light);
    --acc-color-theme2-title: var(--acc-color-theme2-title-light);

    --mm-color-red: var(--mm-color-red-light);
    --mm-color-red-alt: var(--mm-color-red-alt-light);
    --mm-color-orange: var(--mm-color-orange-light);
    --mm-color-orange-alt: var(--mm-color-orange-alt-light);
    --mm-color-yellow: var(--mm-color-yellow-light);
    --mm-color-yellow-alt: var(--mm-color-yellow-alt-light);
    --mm-color-green: var(--mm-color-green-light);
    --mm-color-green-alt: var(--mm-color-green-alt-light);
    --mm-color-cyan: var(--mm-color-cyan-light);
    --mm-color-cyan-alt: var(--mm-color-cyan-alt-light);
    --mm-color-blue: var(--mm-color-blue-light);
    --mm-color-blue-alt: var(--mm-color-blue-alt-light);
    --mm-color-purple: var(--mm-color-purple-light);
    --mm-color-purple-alt: var(--mm-color-purple-alt-light);
    --mm-color-pink: var(--mm-color-pink-light);
    --mm-color-pink-alt: var(--mm-color-pink-alt-light);
    --mm-color-brown: var(--mm-color-brown-light);
    --mm-color-brown-alt: var(--mm-color-brown-alt-light);
    --mm-color-gray: var(--mm-color-gray-light);
    --mm-color-gray-alt: var(--mm-color-gray-alt-light);
    --cm-keyword: var(--cm-keyword-light);
    --cm-variable: var(--cm-variable-light);
    --cm-variable-2: var(--cm-variable-2-light);
    --cm-variable-3: var(--cm-variable-3-light);
    --cm-tag: var(--cm-tag-light);
    --cm-attribute: var(--cm-attribute-light);
    --cm-CodeMirror-cursor: var(--cm-CodeMirror-cursor-light);
    --cm-string: var(--cm-string-light);
    --cm-string-2: var(--cm-string-2-light);
    --cm-comment: var(--cm-comment-light);
    --cm-header: var(--cm-header-light);
    --cm-quote: var(--cm-quote-light);
    --cm-hr: var(--cm-hr-light);
    --cm-link: var(--cm-link-light);
    --cm-negative: var(--cm-negative-light);
    --cm-positive: var(--cm-positive-light);
    --cm-meta: var(--cm-meta-light);
    --cm-bulidin: var(--cm-bulidin-light);
    --cm-bracket: var(--cm-bracket-light);
    --cm-atom: var(--cm-atom-light);
    --cm-number: var(--cm-number-light);
}

// 按钮类阴影
@buttonShadow: 0 2px 10px rgba(0, 0, 0, 0.3);
@buttonShadowNoblur: 0 2px 0 rgba(0, 0, 0, 0.3);

html {
    font-size: @fontSize;
    // zoom: 1;
}

::selection {
    background: @selectionColor;
}

// VLOOK 未加载完成前的样式
body.typora-export #write {
    filter: grayscale(50%) opacity(0.4);
    // display: none;
}

// html,
body {
    background-color: var(--doc-bg-color);
    color: var(--fore-color);
    font-family: @textFont;
    font-weight: @textFontWeight;
    line-height: 2;
    -webkit-tap-highlight-color: transparent;
}

body.typora-export {
    padding-left: 0;
    padding-right: 0;
}

body > *:first-child {
    margin-top: 0 !important;
}

body > *:last-child {
    margin-bottom: 0 !important;
}

// 针对在编辑模式时无效图片链接的样式
.md-img-error > .md-meta {
    background-color: var(--mark-color);
    color: var(--fore-color);
    border: 5px dotted var(--doc-bg-color);
    border-radius: var(--vlook-base-radius);
    padding: 10px;
}
// 排除多媒体类的
.md-img-error[data-src$=".mp3"] > .md-meta,
.md-img-error[data-src$=".m4a"] > .md-meta,
.md-img-error[data-src$=".ogg"] > .md-meta,
.md-img-error[data-src$=".wav"] > .md-meta,
.md-img-error[data-src*=".mp3?"] > .md-meta,
.md-img-error[data-src*=".m4a?"] > .md-meta,
.md-img-error[data-src*=".ogg?"] > .md-meta,
.md-img-error[data-src*=".wav?"] > .md-meta,
.md-img-error[data-src$=".ogv"] > .md-meta,
.md-img-error[data-src$=".mp4"] > .md-meta,
.md-img-error[data-src$=".webm"] > .md-meta,
.md-img-error[data-src*=".ogv"] > .md-meta,
.md-img-error[data-src*=".mp4"] > .md-meta,
.md-img-error[data-src*=".webm"] > .md-meta {
    background: none;
    color: var(--header-color);
    border: inherit;
    padding: inherit;
    border-radius: inherit;
}

// img,
p > img:only-child,
p > .md-image:only-child:not(.md-img-error) img, // 是指 p 内只有 img 的才被视为插图
img[src*="mode=figure"],
.mdx-figure,
.md-diagram-panel svg {
    background-color: var(--doc-bg-color);
    border-radius: var(--vlook-base-radius);
    padding: 0;
    border: 2px solid var(--doc-bg-color-alt);
}

// 图片默认对齐方式，或 URL 参数指定左对齐
// img,
img[src*="mode=figure"],
p > img:only-child,
p > .md-image:only-child:not(.md-img-error) img, // 是指 p 内只有 img 的才被视为插图
p > img:only-child[src*="align=left"],
p > .md-image:only-child:not(.md-img-error) img[src*="align=left"] {
    margin: 0 !important;
}
// 图片 URL 参数指定居中对齐
p > .md-image:only-child:not(.md-img-error) img[src*="align=center"] {
    margin: auto !important;
}
// 图片 URL 参数指定右对齐
p > .md-image:only-child:not(.md-img-error) img[src*="align=right"] {
    margin: auto !important;
    margin-right: 0 !important;
}

// 图片 URL 参数指定是否填充边缘
img[src*="padding=true"] {
    padding: 20px !important;
}

// 图片 URL 参数指定是否独占一行
// img[src*="inline=true"],
// svg[data-inject-url*="inline=true"] {
// }

// 图片 URL 参数指定是否使用网格背景
img[src*="grid=line"] {
    background: url(@figureGridLineLight);
}
img[src*="grid=block"] {
    background: url(@figureGridBlockLight);
}

// 图片 URL 参数指定进行颜色替换
img[data-vk-img-fill="text"],
img[data-vk-img-fill="theme1"],
img[data-vk-img-fill="theme2"] {
    left: -12345px;
    border-color: transparent;
    position: relative;
}

// 图片 URL 参数指定图片的显示版式为：icon
img[src*="mode=icon"],
svg[data-inject-url*="mode=icon"] {
    display: inline !important;
    height: 1.25em;
    width: auto;
    margin-top: -4px !important;
    vertical-align: middle;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}
img[src*="mode=icon2x"],
svg[data-inject-url*="mode=icon2x"] {
    height: 2em;
}

// 图片 URL 参数指定图片的显示版式为：logo
img[src*="mode=logo"],
svg[data-inject-url*="mode=logo"] {
    display: inline !important;
    vertical-align: middle;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
}
img[src*="mode=logol"],
svg[data-inject-url*="mode=logol"] {
    float: left;
    padding: 0 20px 0 0;
}
img[src*="mode=logor"],
svg[data-inject-url*="mode=logor"] {
    float: right;
    padding: 0 0 0 20px;
}

// header 锚点占位
.md-header-anchor {
    margin: 0 !important;
    vertical-align: top !important;
}

// 重新定义 emoji 符号在编辑时的排版
.md-emoji-span:before {
    vertical-align: baseline;
}

// img[src$=".wav"] {
// }

audio {
    margin: 0 10px 0 10px;
    border-radius: var(--vlook-small-radius);
}

a {
    color: var(--a-color) !important;
    border-bottom: @aBorderWidth solid @aLineColor;
    font-family: @boldFont;
    font-weight: normal;
    text-decoration: none;
}
// 指定不使用链接样式
a[href*="lnkcss=none"] {
    border-bottom: none;
}
// kbd 中的链接样式
kbd a {
    color: var(--doc-bg-color) !important;
    border-bottom: none;
}
// 链接中的 kbd 样式
a kbd {
    color: @buttonForeColor !important;
    background-color: @buttonBgColor !important;
    margin: 0;
    border: 0;
    border-radius: var(--vlook-base-radius);
    display: inline-block;
    box-shadow: @buttonShadow, @contrastBorder;
    padding: 5px 10px;
}
// 标题内链接样式
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: @headerColor !important;
    font-weight: inherit;
}

// 指定不使用链接样式
a[href*="lnkcss=none"]:hover,
// kbd 中的链接样式
kbd a:hover {
    color: @aHoverColor !important;
    box-shadow: none;
    border-bottom: none;
}
// 链接中的 kbd 样式
a kbd:hover {
    color: @buttonForeHoverColor !important;
    background-color: @aHoverColor !important;
}

a:hover {
    color: @aHoverColor !important;
    box-shadow: 0 -0.3em 0 0 fade(@aLineColor, 30%) inset;
}
// 链接 hover 时，链接内图片样式
a:hover img {
    filter: brightness(1.2);
}
// 链接 hover 时含图片颜色替换的样式
a:hover img[data-vk-img-fill="text"],
a:hover img[data-vk-img-fill="theme1"],
a:hover img[data-vk-img-fill="theme2"] {
    left: -12345px;
    filter: drop-shadow(12345px 0px @aHoverColor) !important;
    position: relative;
}
// 链接 active 时，链接内图片样式
a:active img {
    filter: brightness(0.8);
}

a:active {
    color: var(--fore-color) !important;
    background-color:var(--doc-bg-color-alt);
    border-bottom: 0;
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
    border-radius: var(--vlook-small-radius);
    transition: none;
}
// 指定不使用链接样式
a[href*="lnkcss=none"]:active,
// kbd 中的链接样式
kbd a:active {
    border: none;
}
// 链接中的 kbd 样式
a kbd:active {
    background-color: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%);
    transition: none;
}

// 默认的超链接样式
a:not([name^="ref-footnote"]):hover::before {
    content: "URL"; // 非页内链接的符号
    white-space: pre;
    margin-top: -8px;
    vertical-align: super;
    line-height: 1;
    color: #FFFFFF;
    border-radius: var(--vlook-tag-radius);
    padding: 2px 3px;
    font-size: 0.5em;
    font-weight: @titleFontWeight;
    background-color: @aLineColor;
    position: absolute;
    z-index: 99999;
}
table th a:not([name^="ref-footnote"]):hover::before,
table td a:not([name^="ref-footnote"]):hover::before {
    margin-top: -14px;
}
// 页面内链接样式
// a[class*="md-toc-inner"]::before,
// a[href^="#"]::before {
//     content: "#";
// }
a[class*="md-toc-inner"]:hover::before,
a[href^="#"]:hover::before {
    content: "#";
    background-color: @accColorGray;
}
// HTTPS 协议
a[href^="http://"]:hover::before {
    content: "HTTP";
    background-color: @accColorBrown;
}
a[href^="https://"]:hover::before {
    content: "Secure HTTP";
    background-color: @accColorGreen;
}
// MAILTO 协议
a[href^="mailto:"]:hover::before {
    content: "Email";
    background-color: @accColorBlue;
}
// FTP 协议
a[href^="ftp://"]:hover::before {
    content: "FTP";
    background-color: @accColorBrown;
}
a[href^="ftps://"]:hover::before {
    content: "Secure FTP";
    background-color: @accColorGreen;
}
// FILE 协议
a[href^="file://"]:hover::before {
    content: "Local File";
    background-color: @accColorBrown;
}
// SMB 协议
a[href^="smb://"]:hover::before {
    content: "SMB";
    background-color: @accColorPurple;
}
// 文档资源
a[href$=".pdf"]:hover::before,
a[href$=".doc"]:hover::before,
a[href$=".docx"]:hover::before,
a[href$=".xls"]:hover::before,
a[href$=".xlsx"]:hover::before,
a[href$=".ppt"]:hover::before,
a[href$=".pptx"]:hover::before,
a[href$=".txt"]:hover::before,
a[href$=".csv"]:hover::before {
    content: "Document";
    background-color: @accColorCyan;
}
// 归档资源
a[href$=".zip"]:hover::before,
a[href$=".rar"]:hover::before,
a[href$=".7z"]:hover::before,
a[href$=".gz"]:hover::before,
a[href$=".tar"]:hover::before,
a[href$=".dmg"]:hover::before,
a[href$=".cab"]:hover::before {
    content: "Archive File";
    background-color: @accColorOrange;
}
// 可执行文件
a[href$=".exe"]:hover::before,
a[href$=".sh"]:hover::before {
    content: "!! High Risk !!";
    background-color: @accColorRed;
}

// 下划线
u {
    text-decoration: none;
    border-bottom: 1px solid var(--fore-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--header-color);
    position: relative;
    margin: 1em 0 0.5em 0;
    padding: 10px;
    line-height: 1.5;
    font-family: @headerFont;
    font-weight: @titleFontWeight;
    border-radius: var(--vlook-base-radius) var(--vlook-base-radius) 0 0;
    background: linear-gradient(0deg, var(--header-bg-start-color), var(--header-bg-end-color));
}

h1+ul,
h1+ol,
h2+ul,
h2+ol,
h3+ul,
h3+ol,
h4+ul,
h4+ol,
h5+ul,
h5+ol,
h6+ul,
h6+ol {
    margin-top: 0;
}

h1 {
    margin-top: 3em;
    font-size: 2em;
    box-shadow: 0 7px 0 0 var(--header-box-shadow) inset;
}

h2 {
    margin-top: 3em;
    font-size: 1.8em;
    box-shadow: 0 5px 0 0 var(--header-box-shadow) inset;
}

// h1 后紧跟 h2，或是只有普通正文段落的情况
// h1 + p + h2,
h1 + h2 {
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h3 {
    margin-top: 2em;
    font-size: 1.6em;
    box-shadow: 0 3px 0 0 var(--header-box-shadow) inset;
}

// h2 后紧跟 h3，或是只有普通正文段落的情况
// h2 + p + h3,
h2 + h3 {
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h4 {
    margin-top: 2em;
    font-size: 1.4em;
    box-shadow: 0 1px 0 0 var(--header-box-shadow) inset;
}

// h3 后紧跟 h4，或是只有普通正文段落的情况
// h3 + p + h4,
h3 + h4 {
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h5 {
    font-size: 1.2em;
    box-shadow: 0 0 0 0 var(--header-box-shadow) inset;
}

// h4 后紧跟 h5，或是只有普通正文段落的情况
// h4 + p + h5,
h4 + h5 {
    box-shadow: none;
    background: none;
    margin-top: -0.5em;
}

h6 {
    margin-bottom: 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-family: @subtitleFont;
    font-weight: @fontWeight;
    font-size: 1.2em;
    box-shadow: none;
    background: none;
}
h6::after {
    content: "";
    display: block;
    width: 3.5em;
    margin-left: 1.25em;
    padding-bottom: 4px;
    border-bottom: 2px solid @contentHeaderNumColor;
}
#write > pre.md-meta-block:first-child + h6::after, // 封面，有 YAML 的情况
#write > h6:first-child::after, // 封面，无 YAML 的情况
#write > h6:last-child::after, // 封底
blockquote h6::after {
    margin-left: 0;
    padding-bottom: 0;
    border: 0;
}

h1 + h6,
h2 + h6,
h3 + h6,
h4 + h6,
h5 + h6,
h6 + h6 {
    margin-top: 0;
    padding-top: 0;
}

li > h6 {
    // 用于：子表
    color: var(--header-color);
    border-left: 0;
    padding-left: 0;
}

li > h6::before {
    content: "▪ ";
    color: @contentHeaderNumColor;
}

strong {
    font-family: @boldFont;
    font-weight: @fontWeight;
}

strong a {
    font-weight: @fontWeight;
}

hr {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    border: 2px solid var(--doc-bg-color-alt);
    overflow: hidden;
    box-sizing: content-box;
    border-top: 0;
}

body > div > h1:first-of-type {
    border-top: 0;
}

body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

body > h3:first-child,
body > h4:first-child,
body > h5:first-child,
body > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child > h1,
a:first-child > h2,
a:first-child > h3,
a:first-child > h4,
a:first-child > h5,
a:first-child > h6 {
    margin-top: 0;
    padding-top: 0;
}

// 配合段落导航使用
ul > li,
ol > li,
p,
figure,
.md-diagram-panel {
    text-align: left;
    margin-top: 0;
}

figure {
    padding-bottom: 1px;
    margin-bottom: 20px;
    border-radius: var(--vlook-base-radius);
}

// 有序、无序列表符号样式
::marker,
li::before {
    font-family: @subtitleFont;
    color: var(--fore-color-alt);
}

ul,
ol {
    padding-left: 2em;
    padding-bottom: 0;
}

// 有序列表
ol > li { // 1级
    list-style-type: decimal;
}
ol > li > ol > li { // 2级
    list-style-type: lower-alpha;
}
ol > li > ol > li > ol > li { // 3级
    list-style-type: lower-roman;
}
ol > li > ol > li > ol > li > ol > li { // 4级
    list-style-type: decimal-leading-zero;
}
ol > li > ol > li > ol > li > ol > li > ol > li { // 5级
    list-style-type: upper-alpha;
}
ol > li > ol > li > ol > li > ol > li > ol > li > ol > li { // 6级
    list-style-type: upper-roman;
}

// 无序列表
ul > li { // 1级
    list-style-type: disc;
}
ul > li > ul > li { // 2级
    list-style-type: square;
}
ul > li > ul > li > ul > li { // 3级
    list-style-type: circle;
}

blockquote {
    border-radius: var(--vlook-base-radius);
    // width: fit-content;
    padding: 0.5em 1em;
    // padding: 0.5em;
    margin-top: 0;
    margin-bottom: 1em;
    color: var(--fore-color);
    background-color: var(--blockquote-bg);
}

blockquote > p {
    margin-bottom: 0;
}

blockquote hr {
    border-color: var(--doc-bg-color);
}

blockquote h6 {
    padding-left: 0;
    padding-right: 0;
    color: var(--fore-color);
    font-size: 1.2em;
}

blockquote h6 a {
    margin-left: -0.1em;
}

blockquote h6::before {
    content: "" !important;
    margin-left: 0 !important;
}

blockquote > ul,
blockquote > ol {
    margin-top: 0;
}

h6 + blockquote,
li > blockquote {
    width: fit-content !important;
}

// 双重引用
blockquote > blockquote {
    border-left: 5px solid fade(@accColorGray, 20%);
    background: none;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
}

blockquote > strong {
    color: inherit !important;
}

.mdx-img-lost {
    background-image: url("") !important;
    background-size: 400px 200px;
    background-color: var(--doc-bg-color-alt);
    border: 0;
    width: 400px;
    height: 200px;
}

// 坏链列表
.mdx-link-error-list {
    display: none;
    padding: 10px 0;
    position: fixed;
    color: var(--fore-color);
    top: 20px;
    right: 20px;
    bottom: 50px;
    width: var(--vlook-nav-center-width);
    line-height: 1.5;
    border-radius: var(--vlook-base-radius);
    background-color: var(--doc-bg-color-alt);
    overflow: auto;
    z-index: 4500;
}
.mdx-link-error-list-header {
    display: none;
    position: absolute;
    z-index: 10;
    border-radius: var(--vlook-base-radius) var(--vlook-base-radius) 0 0;
    top: 0;
    left: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(180deg, var(--doc-bg-color-alt) 10px, var(--doc-bg-color-alt-transparent));
    pointer-events: none;
}
.mdx-link-error-list-body {
    padding: 10px 0;
    height: 100%;
    // overflow-y: scroll;
    z-index: 0;
}
.mdx-link-error-list-items {
    overflow-y: scroll;
    height: 100%;
    z-index: 0;
}
.mdx-link-error-list-footer {
    position: absolute;
    z-index: 10;
    border-radius: 0 0 var(--vlook-base-radius) var(--vlook-base-radius);
    top: auto;
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    background: linear-gradient(0deg, var(--doc-bg-color-alt) 10px, var(--doc-bg-color-alt-transparent));
    pointer-events: none;
}

.mdx-status-bar {
    position: fixed;
    justify-content: center;
    align-items: center;
    // vertical-align: middle;
    border-radius: var(--vlook-small-radius);
    right: 30px;
    bottom: 20px;
    // width: auto;
    height: 30px;
    z-index: 100;
}

.mdx-doc-info {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: var(--fore-color);
    font-family: @subtitleFont;
    font-size: 0.85em;
    background-color: var(--doc-bg-color-alt);
    padding: 0 10px;
    min-width: 80px;
    height: 30px;
    border-radius: var(--vlook-small-radius);
    // float: right;
    opacity: 0.6;
    cursor: default;
    // pointer-events: none;
}
// 非唯一子元素时（如有坏链提示）
// .mdx-doc-info:not(:only-child) {
//     border-radius: var(--vlook-small-radius) 0 0 var(--vlook-small-radius);
// }
// .mdx-doc-info.hover {
    // box-shadow: 0 0 0 1px var(--tbl-border-color) inset;
    // opacity: 1;
// }

// 链接检查结果
.mdx-link-chk-result {
    display: none;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: var(--fore-color);
    background-color: var(--doc-bg-color-alt);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 0 var(--vlook-small-radius) var(--vlook-small-radius) 0;
    // float: right;
    // margin-left: 5px;
}
// 无坏链
.mdx-link-result-ok {
    display: flex;
    background-color: var(--acc-color-green-light);
}
// 链接检查结果：有坏链
.mdx-link-result-error {
    display: inline-flex;
    cursor: pointer;
    background-color: var(--acc-color-red-light);
}
.mdx-link-result-error:hover {
    background-color: var(--fore-color);
}
.mdx-link-result-error:hover > svg > use {
    fill: var(--doc-bg-color);
}
.mdx-link-result-error:active {
    background-color: var(--acc-color-red-light);
    box-shadow: 0 0 0 2px fade(@accColorRed, 50%);
}
.mdx-link-result-error:active > svg > use {
    fill: #FFFFFF;
}

.mdx-link-error-source:focus {
    outline: 2px dashed var(--acc-color-red-light);
}

// .mdx-link-error-list > hr {
//     border-width: 1px;
//     border-color: var(--fore-color-alt);
// }
// .mdx-link-error-list > span {
//     color: var(--fore-color-alt);
//     font-size: 0.9em;
// }

table {
    border-collapse: inherit;
    border-spacing: 0;
    width: auto;
    line-height: 1.5;
    word-break: break-all;
    white-space: pre-wrap;
    border: 2px solid var(--tbl-border-color);
    border-radius: var(--vlook-base-radius);
    background-color: var(--doc-bg-color);
}

// 避免分页后重复显示表头
thead {
    display: contents !important;
}

// 表格表头
table > thead > tr > th,
table > thead > tr > td {
    background-color: var(--tbl-th-bg-color);
    font-family: @boldFont;
    font-weight: @fontWeight;
    border-right: 1px solid var(--tbl-cell-border-color);
    margin: 0;
    padding: 0.5em;
    box-shadow: 0 1px 0 var(--tbl-cell-border-color);
}

// 首行
table > tbody > tr:first-child > td {
    box-shadow: 0 -2px 0 0 var(--tbl-header-color);
}
// 非首行
table > tbody > tr:not(:first-child) > td {
    box-shadow: 0 -1px 0 0 var(--tbl-cell-border-color);
}

// 偶数行
table > tbody > tr:nth-child(2n) {
    background-color: var(--tbl-td-bg-color);
}

// 表头首行的首列
table > thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--vlook-table-radius); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
    white-space: pre;
}

table th,
table td {
    // white-space: pre !important;
    font-size: 0.9em;
}

// 表头首行的尾列
table > thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--vlook-table-radius); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的首列
table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--vlook-table-radius); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

// 表格末行的尾列
table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--vlook-table-radius); // 非16px的原因是存在2px的border，避免因圆角半径不同出现空白
}

table tr > td {
    border-right: 1px solid var(--tbl-cell-border-color);
    margin: 0;
    padding: 5px;
    vertical-align: top;
}

// 表格首列
table tr > th,
table tr > td:first-child {
    white-space: pre !important; // 表格首列默认不换行
}
// 表格末列
table tr > th:last-child,
table tr > td:last-child {
    border-right: 0;
}

// 空白单元格
.mdx-empty-cell {
    padding: 1px;
    background-color: var(--tbl-header-color);
    // box-shadow: none !important;
}
// 非首行内的空白单元格
table > tbody > tr:not(:first-child) > td.mdx-empty-cell {
    box-shadow: none !important;
}

// 重复表头样式
.mdx-th-repeater {
    font-family: @boldFont;
    font-weight: @fontWeight;
    background-color: var(--tbl-th-bg-color);
    // box-shadow: 0 -2px 0 0 var(--tbl-header-color), 0 1px 0 0 var(--tbl-header-color) !important;
    vertical-align: middle !important;
}
.mdx-th-repeater.first {
    box-shadow: 0 -2px 0 0 var(--tbl-header-color), 0 1px 0 0 var(--tbl-header-color) !important;
}
.mdx-th-repeater.not-first {
    box-shadow: 0 1px 0 0 var(--tbl-header-color) !important;
}

// 合并了所有列样式
.mdx-table-colspan-all {
    padding-left: 5px;
    background-color: var(--tbl-th-bg-color);
}
// 空白行，不显示对应的行号
.mdx-table-colspan-all::before {
    content: "";
}

// 表格列格式：加粗
.mdx-tbl-col-fmt-bold {
    font-family: @boldFont;
    font-weight: @fontWeight;
}

// 表格列格式：斜体
.mdx-tbl-col-fmt-em {
    font-style: italic;
}

// 表格列格式：高亮
.mdx-tbl-col-fmt-mark {
    background-color: var(--mark-color) !important;
    color: var(--fore-bg-color) !important;
}

// 表格列格式：数值
.mdx-tbl-col-fmt-num {
    font-family: @numberFont !important;
}
// 表格列格式：负数
.mdx-tbl-col-fmt-num-positive {
    color: #D00000;
}
// 表格列格式：正数
.mdx-tbl-col-fmt-num-negative {
    color: #00B000;
}
// 表格列格式：数值－小数部分
.mdx-tbl-col-fmt-num-decimal {
    font-size: 0.8em;
}
// 表格列格式：数值－货币
.mdx-tbl-col-fmt-currency {
    float: left;
    font-size: 0.9em;
    padding-right: 10px;
    color: var(--fore-color-alt);
    font-weight: normal;
}
// 表格列格式：数值－百分号
.mdx-tbl-col-fmt-percent {
    opacity: 0.6;
    font-size: 0.8em;
}

// 带表格带行折叠时，是目录行的样式
.mdx-tbl-row-g-folder {
    text-align: left !important;
}

// 带表格带行折叠时，不是目录行的样式（有行自动编号）
li > figure table tbody > tr > td.mdx-tbl-row-g-not-folder,
h6 + figure table tbody > tr > td.mdx-tbl-row-g-not-folder {
  text-align: left !important;
  padding-left: 50px !important;
}
// 带表格带行折叠时，不是目录行的样式（无行自动编号）
td.mdx-tbl-row-g-not-folder {
    text-align: left !important;
    padding-left: 25px !important;
}

// 折叠按钮样式
.mdx-tbl-row-g-btn {
    cursor: pointer;
}

.mdx-tbl-row-g-btn.hover > svg > use {
    fill: @aHoverColor !important;
}
.mdx-tbl-row-g-btn.hover:active > svg > use {
    fill: @aActiveColor !important;
}

// 被折叠行的样式
.mdx-tbl-row-g-sub {
    text-align: left !important;
    padding-left: 5px !important;
}

// 缩进的占位元素样式
.mdx-tbl-row-g-identer {
// .mdx-tbl-row-g-identer-blank {
    width: 4px;
    height: 32px;
    display: inline-block;
    padding: 0;
    margin: -10px 58px -10px 4px;
}
// 带表格行号的样式微调
h6 + figure table .mdx-tbl-row-g-identer,
// h6 + figure table .mdx-tbl-row-g-identer-blank,
li > figure table .mdx-tbl-row-g-identer {
// li > figure table .mdx-tbl-row-g-identer-blank {
    margin-right: 82px;
}

// 连续缩进的占位元素进行修正
.mdx-tbl-row-g-identer + .mdx-tbl-row-g-identer {
// .mdx-tbl-row-g-identer + .mdx-tbl-row-g-identer-blank,
// .mdx-tbl-row-g-identer-blank + .mdx-tbl-row-g-identer {
    margin-left: -12px !important;
}
// 带表格行号的样式微调
h6 + figure table .mdx-tbl-row-g-identer + .mdx-tbl-row-g-identer,
// h6 + figure table .mdx-tbl-row-g-identer + .mdx-tbl-row-g-identer-blank,
// h6 + figure table .mdx-tbl-row-g-identer-blank + .mdx-tbl-row-g-identer,
li > figure table .mdx-tbl-row-g-identer + .mdx-tbl-row-g-identer {
// li > figure table .mdx-tbl-row-g-identer + .mdx-tbl-row-g-identer-blank,
// li > figure table .mdx-tbl-row-g-identer-blank + .mdx-tbl-row-g-identer {
    margin-right: 52px !important;
}

// 缩进的单元格为目录节点
.mdx-tbl-row-g-identer-folder {
    margin-right: 38px;
}
// 带表格行号的样式微调
h6 + figure table .mdx-tbl-row-g-identer-folder,
li > figure table .mdx-tbl-row-g-identer-folder {
    margin-right: 62px !important;
}
// 连续缩进的占位元素修正
h6 + figure table .mdx-tbl-row-g-identer + .mdx-tbl-row-g-identer-folder,
li > figure table .mdx-tbl-row-g-identer + .mdx-tbl-row-g-identer-folder {
    margin-right: 30px !important;
}

// li/header下的表格增加表格行号
li > figure table,
h6 + figure table {
    counter-reset: tableRowNumber - 1;
}

li > figure table tbody tr,
h6 + figure table tbody tr {
    counter-increment: tableRowNumber;
}

// 表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
figure table tr::before {
    content: "";
    color: var(--toc-header-num-color);
    font-family: @codeFont;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 0.8em;
    vertical-align: middle;
    text-align: right;
    width: 2.5em;
    position: absolute;
    left: 1em;
    padding-top: 5px;
}

// 列表下的表格表头行号
// 该过滤器更新后，须同步更新长表格折叠 tableFolding() 中对应的过滤器
li > figure table tbody tr::before {
    content: counter(tableRowNumber);
    text-align: right;
    margin-top: 4px;
    margin-left: -15px;
    font-size: 0.6em;
    color: var(--fore-color-alt);
    position: absolute;
}
// hover 时行号内容样式
li > figure table tbody tr:hover::before {
    content: "▶";
    color: @aLineColor;
}

// 表格折叠后强制隐藏表格行号
.mdx-tbl-row-num-hidden::before {
    content: "" !important;
}

// h1-6 下的表格行号
h6 + figure table tbody tr::before {
    content: counter(tableRowNumber);
    text-align: right;
    margin-top: 4px;
    margin-left: 5px;
    font-size: 0.6em;
    color: var(--fore-color-alt);
    position: absolute;
}
// hover 时行号内容样式
h6 + figure table tbody tr:hover::before {
    content: "▶";
    color: @aLineColor;
}

// 应显示表格行的表格的首列
li > figure table tr > th:first-child,
li > figure table tr > td:first-child,
h6 + figure table tr > th:first-child,
h6 + figure table tr > td:first-child {
    padding-left: 30px;
}

// li/header 后的表格，格式微调
li > figure {
    margin-top: 0;
}

// h1-6 后的表格，格式微调
h1 + figure,
h2 + figure,
h3 + figure,
h4 + figure,
h5 + figure,
h6 + figure {
    margin-top: 0;
}

// 表格十字光标
.mdx-table-cross {
    top: 0;
    width: 100px;
    height: 100px;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.mdx-table-cross.left {
    background: linear-gradient(90deg, fade(@aLineColor, 1%), @tableCrossBgColor);
}

.mdx-table-cross.right {
    background: linear-gradient(90deg, @tableCrossBgColor, fade(@aLineColor, 1%));
}

.mdx-table-cross.up {
    background: linear-gradient(0deg, @tableCrossBgColor, fade(@aLineColor, 1%));
}

.mdx-table-cross.down {
    background: linear-gradient(0deg, fade(@aLineColor, 1%), @tableCrossBgColor);
}

// 高亮
mark {
    box-shadow: 0 -0.9em 0 0 var(--mark-color) inset;
    background: none;
    margin-left: 0.1em;
    margin-right: 0.1em;
    color: inherit;
}

// 删除
del,
del strong {
    color: var(--del-color) !important;
    text-decoration: line-through solid !important;
}

del code {
    font-style: italic;
    text-decoration: line-throug solid !important;
}

// 脚注区域
.footnotes-area {
    margin-top: 100px;
}

// 文档末尾的脚注行
.footnote-line {
    font-size: 1em;
    margin-top: 0.5em;
    padding-bottom: 0.5em;
}

// 弹层中的脚注行
.mdx-foot-note-panel-content > .footnote-line {
    padding-bottom: 50px;
}

// 脚注行序号
.md-fn-count {
    font-family: @boldFont;
    font-weight: normal;
}

.md-fn-count::before {
    content: "[";
}

.md-fn-count::after {
    content: "] ";
}

// 脚注行序末返回链接
.reversefootnote {
    color: @accColorBlue;
}

.reversefootnote:hover {
    color: @accColorRed;
}

// 脚注上标
a[name^="ref-footnote-"] {
    font-family: @boldFont;
    font-weight: normal;
    color: @accColorBlue;
}

a[name^="ref-footnote-"]:hover {
    color: @aActiveColor;
}

.CodeMirror-gutters {
    border-width: 0;
    background-color: var(--doc-bg-color-alt);
    border-right: 1px solid var(--doc-bg-color-alt);
    height: 100% !important; // 避免代码块的题注 hover 样式的背景色透出
}

.CodeMirror-linenumber {
    color: @foreColorLightAlt;
}

tt,
code {
    color: var(--fore-color);
    font-family: @codeFont;
    font-weight: normal;
    background-color: var(--code-bg-color);
    border-radius: var(--vlook-small-radius);
    padding: 0.1em 0.2em;
    margin: 0 0.1em;
    box-shadow: 0 0 0 1px var(--doc-bg-color) inset;
    font-size: 0.9em;
    display: inline;
    white-space: pre;
}

// 多行代码样式
.md-fences {
    color: var(--fore-color);
    font-family: @codeFont;
    // font-weight: normal;
    border-radius: var(--vlook-base-radius);
    border: 2px solid var(--tbl-border-color);
    margin: 0 0 20px 0;
}
// 生成题注后的样式调整，未生成题注前的样式主要在编辑时使用
.mdx-caption > .md-fences {
    margin: 0;
}

.task-list {
    padding-left: 0;
}

.task-list-item {
    padding-left: 32px;
}

.task-list-item input {
    top: 3px;
    left: 8px;
}

// YAML 的样式
#write > pre.md-meta-block {
    font-family: @codeFont;
    font-weight: normal;
    font-size: 1em;
    line-height: 2;
    border-radius: var(--vlook-base-radius);
    padding: 4px 10px;
    color: var(--fore-color);
    background-color: var(--code-bg-color);
}

.mathjax-block > .code-tooltip {
    bottom: 0.375em;
}

.md-tag {
    color: inherit;
}

#typora-quick-open {
    border: 1px solid var(--tbl-border-color);
    background-color: @foreColorLightFade3;
}

#typora-quick-open-item {
    background-color: @foreColorLightFade3;
    border-color: var(--tbl-border-color);
    border-style: solid;
    border-width: 1px;
}

#md-notification::before {
    top: 10px;
}

/** focus mode */

.on-focus-mode blockquote {
    border-left-color: @foreColorLight;
}

header,
.context-menu,
.megamenu-content,
footer {}

/**************************************
* Header Counters in TOC 目录中的标题序号样式
**************************************/

/* No link underlines in TOC */

.md-toc-content {
    counter-reset: h1toc;
}

.md-toc-h1 {
    margin-left: 0;
    padding-left: 10px;
    counter-reset: h2toc;
}

.md-toc-h2 {
    margin-left: 0;
    padding-left: 20px;
    counter-reset: h3toc;
}

.md-toc-h3 {
    margin-left: 0;
    padding-left: 30px;
    counter-reset: h4toc;
}

.md-toc-h4 {
    margin-left: 0;
    padding-left: 40px;
    counter-reset: h5toc;
}

.md-toc-h5 {
    margin-left: 0;
    padding-left: 50px;
    counter-reset: h6toc;
}

.md-toc-h6 {
    display: none;
    margin-left: 0;
    padding-left: 50px;
}

.md-toc-h1::before {
    counter-increment: h1toc;
    content: counter(h1toc) ".  ";
}

.md-toc-h1 > .md-toc-inner {
    margin-left: 0;
    font-weight: @titleFontWeight;
}

.md-toc-h2::before {
    counter-increment: h2toc;
    content: counter(h1toc) "." counter(h2toc) "  ";
}

.md-toc-h2 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h3::before {
    counter-increment: h3toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "  ";
}

.md-toc-h3 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h4::before {
    counter-increment: h4toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "  ";
}

.md-toc-h4 > .md-toc-inner {
    margin-left: 0;
}

.md-toc-h5::before {
    counter-increment: h5toc;
    content: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "  ";
}

.md-toc-h5 > .md-toc-inner {
    margin-left: 0;
}

/**************************************
* Header Counters in Content 内容中的目录序号样式
**************************************/

/** initialize css counter */

#write {
    counter-reset: h1;
}

h1 {
    counter-reset: h2;
}

h2 {
    counter-reset: h3;
}

h3 {
    counter-reset: h4;
}

h4 {
    counter-reset: h5;
}

#write h1::before,
#write h2::before,
#write h3::before,
#write h4::before,
#write h5::before,
#write h6::before {
    color: @contentHeaderNumColor;
}

#write h1::before {
    counter-increment: h1;
    content: counter(h1) ".  ";
}

#write h2::before {
    counter-increment: h2;
    content: counter(h1) "." counter(h2) "  ";
}

// h3.md-focus.md-heading::before,
#write h3::before {
    /*override the default style for focused headings */
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) "  ";
}

// h4.md-focus.md-heading::before,
#write h4::before {
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "  ";
}

// h5.md-focus.md-heading::before,
#write h5::before {
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "  ";
}

// h6.md-focus.md-heading::before,
#write h6::before {
    content: "❖ "; // ◎
}
// 封面、封底的前信息
#write > pre.md-meta-block:first-child + h6::before,
#write > h6:first-child::before,
#write > h6:last-child::before {
    content: "";
}

/** override the default style for focused headings */

#write > h3.md-focus::before,
#write > h4.md-focus::before,
#write > h5.md-focus::before,
#write > h6.md-focus::before,
h3.md-focus::before,
h4.md-focus::before,
h5.md-focus::before,
h6.md-focus::before {
    border: inherit;
    position: inherit;
    left: inherit;
    float: none;
    top: initial;
    font-size: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/**************************************
* Electron UI
**************************************/

.outline-item {
    line-height: 1;
    font-family: @subtitleFont;
    font-weight: normal;
}

/**************************************
* 脚本化画表 CSS
**************************************/

/**************************************
* Mermaid CSS
**************************************/

// ** 注意 **
// 更改些段与字体相关的样式时，须同步修改切换字体样式的 JS 代码

/* ----- pie diagram 饼图 ----- */

// 标题、图例文本
.pieTitleText {
    fill: var(--fore-color) !important;
    font-family: @boldFont !important;
    font-weight: @fontWeight !important;
    font-size: 1.5em !important;
}
.legend text {
    fill: var(--fore-color) !important;
    font-family: @boldFont !important;
    font-weight: @fontWeight !important;
}

.slice {
    font-family: @boldFont !important;
    font-weight: @fontWeight !important;
}

/* ----- flow diagram 流程图 ----- */

.mermaid .label div,
.mdx-figure .label div {
    font-size: 0.9em !important;
}

svg[id^="mermaidChart"] {
    color: var(--fore-color) !important;
}

// 矩形（方角/圆角/圆形/菱形/旗形）
.label div {
    color: var(--fore-color) !important;
    font-family: @boldFont !important;
    font-weight: normal !important;
}

// 方角矩形
.node rect[rx="0"][ry="0"] {
    fill: var(--mm-color-blue-alt) !important;
    stroke: var(--mm-color-blue) !important;
    stroke-width: 5px !important;
}

// 圆角矩形
.node rect[rx="5"][ry="5"] {
    fill: var(--mm-color-blue-alt) !important;
    stroke: var(--mm-color-blue) !important;
    stroke-width: 1px !important;
}

// 圆形
.node circle {
    fill: var(--doc-bg-color) !important;
    stroke: var(--mm-color-green) !important;
    stroke-width: 2px !important;
}

// 自定义：条件、分支的菱形
.node polygon {
    fill: var(--mm-color-red-alt) !important;
    stroke: var(--mm-color-red) !important;
    stroke-width: 1px !important;
}

// 自定义：分页的旗形
.node[id^="page"] polygon,
.node[id^="flowchart-page"] polygon {
    fill: var(--doc-bg-color) !important;
    stroke: var(--mm-color-green) !important;
    stroke-width: 2px !important;
}

// 自定义：状态机图的菱形
.node[id^="trans"] polygon,
.node[id^="flowchart-trans"] polygon {
    fill: var(--fore-color) !important;
    stroke-width: 0 !important;
}

// 线条
.edgePath .path {
    stroke: var(--fore-color) !important;
    stroke-width: 2px;
}

// 线条箭头
.arrowheadPath {
    fill: var(--fore-color);
}

// 线条文本
.edgeLabel .label span,
.edgeLabel {
    color: var(--fore-color) !important;
    fill: var(--doc-bg-color) !important;
    line-height: 1em !important;
}

// 线条文本背景
.edgeLabel div,
.edgeLabel .label rect {
    fill: var(--doc-bg-color) !important;
}

// 子图
.cluster rect {
    fill: var(--doc-bg-color-alt) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 1px !important;
    stroke-dasharray: 3px !important;
}

// 子图文本
.cluster text {
    color: var(--fore-color) !important;
    fill: var(--fore-color) !important;
    font-family: @boldFont !important;
    font-weight: normal !important;
}

// 自定义：流程图「开始」样式
#START rect,
g[id^=flowchart-START] rect {
    fill: var(--fore-color) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 5px !important;
}

#START rect+.label div,
g[id^=flowchart-START] rect+.label div {
    color: var(--doc-bg-color) !important;
    font-weight: @fontWeight !important;
}

// 自定义：流程图「结束」节点样式
#END rect,
g[id^=flowchart-END] rect {
    color: var(--fore-color) !important;
    fill: var(--doc-bg-color) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 5px !important;
}

#END rect+.label div,
g[id^=flowchart-END] rect+.label div {
    font-weight: @fontWeight !important;
}

// 自定义：状态机图「初始」状态样式
#INIT circle,
g[id^=flowchart-INIT] circle {
    fill: var(--fore-color) !important;
    stroke: var(--fore-color) !important;
    stroke-width: 0 !important;
}

#INIT .label div,
g[id^=flowchart-INIT] .label div {
    color: var(--fore-color) !important;
}

// 与「初始」状态同级的所有矩形节点
#INIT ~ g > rect,
g[id^=flowchart-INIT] ~ g > rect {
    fill: var(--mm-color-purple-alt) !important;
    stroke: var(--mm-color-purple) !important;
    stroke-width: 3px !important;
}

// 自定义：状态机图「最终」状态节点样式
#FINAL circle,
g[id^=flowchart-FINAL] circle {
    fill: none !important;
    stroke: var(--fore-color) !important;
    stroke-width: 5px !important;
}

/* ----- sequeuce diagram 时序图 ----- */

// 角色
.actor {
    stroke: var(--mm-color-blue) !important;
    fill: var(--mm-color-blue-alt) !important;
    font-size: 1em !important;
    stroke-width: 1px !important;
}

// 人物角色
.mdx-actor-person {
    fill: var(--doc-bg-color-alt) !important;
    stroke: var(--fore-color-alt) !important;
}

// 重要系统角色
.mdx-actor-key-sys {
    stroke-width: 3px !important;
    font-weight: @fontWeight !important;
}

// 外部系统角色
.mdx-actor-ext-sys {
    stroke-dasharray: 5px, 2px !important;
    font-style: italic !important;
}

// 角色文本
text.actor,
text.actor > tspan {
    fill: var(--fore-color) !important;
    stroke: none !important;
    font-size: 0.9em !important;
    font-family: @boldFont !important;
}

// 角色生命线
.actor-line {
    stroke: var(--mm-color-blue) !important;
    stroke-width: 1px !important;
}

// 消息序号
.sequenceNumber {
    fill: var(--doc-bg-color) !important;
    font-weight: @fontWeight !important;
}
// 消息序号背景
#sequencenumber {
    fill: var(--fore-color) !important;
}

// 实线消息
.messageLine0 {
    stroke-width: 2px !important;
    stroke: var(--fore-color) !important;
}

// 实线箭头
#arrowhead,
#arrowhead path {
    fill: var(--fore-color) !important;
}

// 虚线消息
.messageLine1 {
    stroke-width: 2px !important;
    stroke: var(--fore-color) !important;
}

// 异步消息箭头
#crosshead,
#crosshead path {
    fill: var(--fore-color-alt) !important;
    stroke: var(--fore-color) !important;
}

// 消息文本
.messageText {
    fill: var(--fore-color) !important;
    stroke: none !important;
    font-size: 0.9em !important;
    font-family: @boldFont !important;
    font-weight: normal !important;
    line-height: 2em !important;
}

.activation0,
.activation1,
.activation2 {
    fill: var(--mm-color-blue-alt) !important;
    stroke-width: 0 !important;
}

// 片断的类型标签背景
.labelBox {
    stroke: none !important;
    fill: var(--mm-color-purple-light) !important;
}

// 角标
// 片断的类型文本
// .labelText tspan,
.labelBox+.labelText {
    fill: var(--mm-color-purple-alt-light) !important;
    font-size: 0.9em !important;
    font-family: @boldFont !important;
    font-weight: @fontWeight !important;
}

// 片断的标题标签文本
.loopText,
.loopText > tspan {
    fill: var(--fore-color) !important;
    fill: var(--mm-color-purple-light) !important;
    font-family: @boldFont !important;
    font-weight: bold !important;
}

// 片断的线框
.loopLine {
    stroke-width: 2px !important;
    stroke-dasharray: 3px, 3px !important;
    stroke: var(--mm-color-purple-light) !important;
}

// 备注背景
.note {
    stroke: var(--mm-color-yellow) !important;
    stroke-dasharray: 5px !important;
    fill: var(--mm-color-yellow-alt) !important;
}

// 备注文本
.noteText tspan {
    fill: var(--fore-color) !important;
    stroke: none !important;
    font-size: 0.9em !important;
    font-family: @textFont !important;
    font-weight: @textFontWeight !important;
}

/* ----- state diagram 状态机图 ----- */

g.stateGroup circle {
    fill: var(--fore-color) !important;
    stroke: var(--doc-bg-color) !important;
}
g.stateGroup rect,
g.stateGroup line {
    fill: var(--mm-color-purple-alt) !important;
    stroke: var(--mm-color-purple) !important;
}
g.stateGroup rect[height="7"] {
    fill: var(--fore-color) !important;
    stroke: none !important;
}
.transition {
    stroke: var(--fore-color) !important;
}
g.stateGroup .composit {
    fill: var(--doc-bg-color) !important;
}
g.stateGroup .state-title,
g.stateGroup text {
    fill: var(--fore-color) !important;
    font-family: @boldFont !important;
    font-weight: normal !important;
    font-size: 0.5em !important;
}

.stateLabel text {
    font-size: 0.5em !important;
}

g.state-note {
    fill: var(--mm-color-gray-alt);
    stroke: var(--mm-color-gray);
}

/* ----- class diagram 类图 ----- */

g.cardinality text,
g.classGroup text,
g.classLabel .label {
    font-family: @codeFont !important;
    font-weight: normal !important;
    fill: var(--fore-color) !important;
    stroke: none !important;
}

g.classGroup rect {
  fill: var(--mm-color-brown-alt) !important;
  stroke: var(--mm-color-brown) !important;
}

g.classGroup line {
  stroke: var(--mm-color-brown) !important;
  stroke-width: 1px !important;
}

g.classLabel .box {
  stroke: none !important;
  stroke-width: 0 !important;
  fill: var(--mm-color-brown-alt) !important;
  opacity: 0.5 !important;
}

.relation {
  stroke: var(--fore-color) !important;
  stroke-width: 1px !important;
  fill: none !important;
}

.composition,
#compositionStart,
#compositionEnd,
.aggregation,
#aggregationStart,
#aggregationEnd,
#dependencyStart,
#dependencyEnd,
#extensionStart,
#extensionEnd {
  fill: var(--fore-color) !important;
  stroke:  var(--fore-color) !important;
  stroke-width: 1px !important;
}

div.mermaidTooltip {
    position: absolute !important;
    text-align: center !important;
    max-width: 200px !important;
    padding: 2px !important;
    background: var(--fore-color-alt) !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: var(--vlook-small-radius) !important;
    pointer-events: none !important;
    z-index: 100 !important;
}

/* ----- gantt diagram 甘特图 ----- */

.section {
    stroke: none !important;
}

.section0 {
    fill: var(--fore-color-alt) !important;
}

.section2 {
    fill: var(--fore-color-alt) !important;
}

.section1,
.section3 {
    fill: @foreColorLightFade3 !important;
}

.sectionTitle0,
.sectionTitle1,
.sectionTitle2,
.sectionTitle3 {
    fill: var(--fore-color) !important;
}

.sectionTitle {
    text-anchor: start !important;
    font-size: 0.8em !important;
    line-height: 2em !important;
}

.grid .tick {
    stroke: var(--fore-color-alt) !important;
    shape-rendering: crispEdges !important;
}

.grid path {
    stroke-width: 0 !important;
}

.today {
    fill: none;
    stroke: var(--mm-color-red) !important;
    stroke-width: 3px !important;
}

.task {
    stroke-width: 2px !important;
}

.taskText {
    text-anchor: middle !important;
    font-size: 0.8em !important;
    line-height: 2em !important;
    font-family: @boldFont !important;
    font-weight: normal !important;
}

.taskTextOutsideRight {
    fill: var(--fore-color) !important;
    font-family: @boldFont !important;
    font-weight: normal !important;
    text-anchor: start !important;
}

.taskTextOutsideLeft {
    fill: var(--fore-color) !important;
    font-family: @boldFont !important;
    font-weight: normal !important;
    text-anchor: end !important;
}

/* 当前的任务 */

.active0,
.active1,
.active2,
.active3 {
    fill: var(--mm-color-blue-alt) !important;
    stroke: var(--mm-color-blue) !important;
}

.activeText0,
.activeText1,
.activeText2,
.activeText3 {
    fill: var(--mm-color-blue) !important;
}

/* 已完成的任务 */

.done0,
.done1,
.done2,
.done3 {
    stroke: none !important;
    fill: var(--mm-color-blue-alt) !important;
    stroke-width: 2px !important;
    stroke-dasharray: 2px !important;
}

/* 未来的任务 */

.task0,
.task1,
.task2,
.task3 {
    fill: var(--doc-bg-color) !important;
    stroke: var(--mm-color-blue) !important;
    stroke-dasharray: 2px !important;
}

.taskText0,
.taskText1,
.taskText2,
.taskText3 {
    fill: var(--fore-color) !important;
}

.taskTextOutside0,
.taskTextOutside2 {
    fill: var(--fore-color) !important;
}

.taskTextOutside1,
.taskTextOutside3 {
    fill: var(--fore-color) !important;
}

.doneText0,
.doneText1,
.doneText2,
.doneText3 {
    fill: var(--fore-color) !important;
}

/* 当前关键路径的任务 */

.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
    stroke: var(--mm-color-red) !important;
    fill: var(--mm-color-red-alt) !important;
    stroke-width: 2px !important;
}

.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
    fill: var(--mm-color-red) !important;
}

/* 已完成的关键路径任务 */

.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
    stroke: none !important;
    fill: var(--mm-color-red-alt) !important;
    stroke-width: 2px !important;
    cursor: pointer !important;
    shape-rendering: crispEdges !important;
}

/* 未来的关键路径任务 */

.crit0,
.crit1,
.crit2,
.crit3 {
    stroke: var(--mm-color-red) !important;
    fill: var(--doc-bg-color) !important;
    stroke-width: 2px !important;
    stroke-dasharray: 2px !important;
}

.critText0,
.critText1,
.critText2,
.critText3 {
    fill: var(--fore-color) !important;
}

.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
    fill: var(--fore-color) !important;
}

/* 标题 */
.titleText {
    text-anchor: middle !important;
    font-size: 1.5em !important;
    line-height: 2em !important;
    font-family: @boldFont !important;
    font-weight: @fontWeight !important;
    fill: var(--fore-color) !important;
}


/* ----- entity 实体关系图 ----- */

.entityBox {
    fill: var(--mm-color-pink-alt) !important;
    stroke: var(--mm-color-pink) !important;
}

/**************************************
* 重定义Typora原生样式
**************************************/

#write {
    max-width: 100%;
    margin: 0 auto;
    // margin-left: calc(var(--vlook-nav-center-width) + 20px);
    padding: 10px 20px;
    // overflow-y: auto;
}

// VLOOK 未加载完成前的样式
// .mdx-vlook-inside + #write {
//     filter: grayscale(50%) opacity(0.5);
// }

#write > ul:first-child,
#write > ol:first-child {
    margin-top: 30px;
}

// 代码块相关样式
#write pre.ty-contain-cm {
    padding: 0;
    border-radius: var(--vlook-base-radius);
}

.CodeMirror-scroll {
    border-radius: var(--vlook-table-radius);
}

.CodeMirror-sizer {
    background-color: var(--doc-bg-color);
}

.CodeMirror pre {
    padding: 0 10px;
}

.CodeMirror-line:hover {
    background-color: var(--doc-bg-color-alt);
}

.CodeMirror.cm-s-inner {
    border-radius: var(--vlook-table-radius);
}

.CodeMirror div.CodeMirror-cursor {
    border-color: var(--cm-CodeMirror-cursor);
}

.cm-s-inner .cm-variable,
.cm-s-inner .cm-operator,
.cm-s-inner .cm-property {
    color: var(--cm-variable);
}

.cm-s-inner .cm-variable-2 {
    color: var(--cm-variable-2);
}

.cm-s-inner .cm-variable-3 {
    color: var(--cm-variable-3);
}

.cm-s-inner .cm-keyword {
    color: var(--cm-keyword);
}

.cm-s-inner .cm-tag {
    color: var(--cm-tag);
}

.cm-s-inner .cm-attribute {
    color: var(--cm-attribute);
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid #b8bfc6;
    z-index: 3;
}

.cm-s-inner .cm-string {
    color: var(--cm-string);
}

.cm-s-inner .cm-string-2 {
    color: var(--cm-string-2);
}

.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
    color: var(--cm-comment);
}

.cm-s-inner .cm-header,
.cm-s-inner .cm-def,
.cm-s-inner.cm-header,
.cm-s-inner.cm-def {
    color: var(--cm-header);
}

.cm-s-inner .cm-quote,
.cm-s-inner.cm-quote {
    color: var(--cm-quote);
}

.cm-s-inner .cm-hr {
    color: var(--cm-hr);
}

.cm-s-inner .cm-link {
    color: var(--cm-link);
}

.cm-s-inner .cm-negative {
    color: var(--cm-negative);
}

.cm-s-inner .cm-positive {
    color: var(--cm-positive);
}


.cm-s-inner .cm-meta,
.cm-s-inner .cm-qualifier {
    color: var(--cm-meta);
}

.cm-s-inner .cm-builtin {
    color: var(--cm-bulidin);
}

.cm-s-inner .cm-bracket {
    color: var(--cm-bracket);
}

.cm-s-inner .cm-atom,
.cm-s-inner.cm-atom {
    color: var(--cm-atom);
}

.cm-s-inner .cm-number {
    color: var(--cm-number);
}

/* 数学公式 */
// .MathJax_SVG {
.MathJax_SVG_Display {
    border: 0;
    // border-left: 4px solid var(--blockquote-bg);
    overflow-x: auto;
    border: 2px solid var(--doc-bg-color-alt);
    border-radius: var(--vlook-base-radius);
    padding: 10px;
    cursor: pointer;
}
// 公式编号标签
.MathJax_SVG g[id^=mjx-eqn-] {
    fill: var(--fore-color-alt);
}
// .MathJax_SVG > svg {
//     max-width: none !important;
// }
// .MathJax_SVG:hover,
.MathJax_SVG_Display:hover {
    border-color: @aLineColor;
}
// .MathJax_SVG:active,
.MathJax_SVG_Display:active {
    // background-color: var(--doc-bg-color);
    transform: scale(1.5);
    // transform-origin: 10px 10px;
    border: 0;
    // box-shadow: @buttonShadow !important;
}
.MathJax_SVG:focus,
.MathJax_SVG_Display:focus {
    // box-shadow: none;
    // outline: none;
}
.MathJax_SVG_Display > .MathJax_SVG {
    // border: none;
}
.MathJax_SVG g text {
    color: var(--fore-color);
}

/* md 系统样式 */
.md-toc-inner {
    text-decoration: none;
    box-shadow: none;
}

.mdx-toc-item, // 用于替代默认的样式，但不设置 ::before
.md-toc-item {
    color: var(--fore-color);
    font-family: @subtitleFont;
    font-weight: normal;
    font-size: 1em;
    margin-left: 10px;
    margin-right: 10px;
    padding-right: 5px;
    border-radius: var(--vlook-small-radius);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.mdx-toc-item {
    white-space: normal;
    line-height: 1.5;
    padding: 5px;
    margin-bottom: 5px;
    display: block;
}
.md-toc-item::before {
    color: var(--toc-header-num-color);
    padding-left: 5px;
}
.mdx-toc-item:hover,
.md-toc-item:hover {
    background-color: var(--blockquote-bg);
}
.mdx-toc-item:active,
.md-toc-item:active {
    color: var(--doc-bg-color);
    background-color: var(--fore-color-alt);
    box-shadow: 0 0 0 2px var(--tbl-border-color);
    transition: none;
}
.mdx-toc-item:active::before,
.md-toc-item:active::before {
    color: var(--doc-bg-color);
    // jQuery 选择器无法选择 ::before，所以须直接指定
    // transition: var(--vlook-transition-value);
}

.mdx-caption-1 > span,
.mdx-toc-item > span {
    color: var(--fore-color-alt);
    font-size: 0.85em;
}
.mdx-toc-item:active > span {
    color: var(--doc-bg-color);
}

.md-toc,
.mdx-toc {
    margin-top: 20px;
    margin-bottom: 0.5em;
    border-radius: 0;
    line-height: 2;
    font-size: 1em;
}

.md-toc-item a {
    text-decoration: none;
    padding: 0 0 0 0;
    border-radius: 0;
    border: 0;
}

.md-toc-item a:hover {
    //, .md-toc-h6 a:hover
    color: var(--fore-color) !important;
    box-shadow: none;
    text-decoration: none;
    border: 0;
}

sup.md-footnote {
    color: var(--fore-color-alt);
    background: none;
    padding: 0;
    margin-left: 0.2em;
    margin-right: 0.2em;
}

sup.md-footnote > a {
    color: var(--doc-bg-color) !important;
    background-color: var(--fore-color-alt);
    margin: 0;
    box-shadow: none;
    border-bottom: none;
    padding: 0 5px;
    border-radius: var(--vlook-base-radius);
    font-size: 0.8em;
}

sup.md-footnote > a:hover {
    background-color: @aLineColor;
    color: @buttonForeColor !important;
}

.footnote-line > a:not(.reversefootnote) {
    color: var(--fore-color);
}

kbd {
    font-family: @codeFont;
    font-weight: @fontWeight;
    font-size: 0.875em;
    border-radius: var(--vlook-tag-radius);
    margin: 0 5px;
    padding: 1px 8px;
    border: 2px solid var(--fore-color);
    color: var(--doc-bg-color);
    background-color: var(--fore-color);
    box-shadow: 0 0 0 2px var(--doc-bg-color-alt) inset;
}

// task list - 1
ul > .md-task-list-item {
    list-style-type: decimal !important;
}

// task list - 2
ul > li > ul > .md-task-list-item {
    list-style-type: lower-alpha !important;
}

// task list - 3
ul > li > ul > li > ul > .md-task-list-item {
    list-style-type: disc !important;
}

// task list - 4
ul > li > ul > li > ul > li > ul > .md-task-list-item {
    list-style-type: lower-roman !important;
}

// task list - 5
ul > li > ul > li > ul > li > ul > li > ul > .md-task-list-item {
    list-style-type: circle !important;
}

// task list - 6
ul > li > ul > li > ul > li > ul > li > ul > li > ul > .md-task-list-item {
    list-style-type: square !important;
}

// task list checkbox
.md-task-list-item > input {
    margin-left: -0.5em !important;
    margin-top: 0.3em !important;
}

// task list text
.md-task-list-item > p {
    margin-left: 1.2em !important;
    margin-top: 0;
    margin-bottom: 0;
}

li > :first-child,
li p {
    margin-top: 0;
    margin-bottom: 0;
}

// 段落后紧跟有序、无序列表时，减少其行距间隔
p + ul,
p + ol {
    margin-top: -1em;
}
// 但在引用内则取消覆盖以上样式
blockquote p + ul,
blockquote p + ol {
    margin-top: 0;
}
// 在列表内，段落后紧跟有序、无序列表时，保持原行距间隔
li > p + ol,
li > p + ul {
    margin-top: 0;
}

/**************************************
* VLOOK UI 自定义样式
**************************************/

// --------------------
// 非衬线（小清新）字体集
.mdx-font-title-sans {
    font-family: @sansFont !important;
}

.mdx-font-subtitle-sans {
    font-family: @sansFont !important;
}

.mdx-font-header-sans {
    font-family: @sansFont !important;
}

.mdx-font-text-sans {
    font-family: @base_mono_sans_en, @sansFont !important;
    font-weight: normal;
}

.mdx-font-bold-sans {
    font-family: @base_mono_sans_en, @sansFont !important;
}

.mdx-font-number-sans {
    font-family: @number_font, @base_mono_sans_en, @sansFont !important;
}

.mdx-font-tag-sans {
    font-family: @base_mono_sans_en, @boldFont !important;
    font-weight: normal;
}

.mdx-font-code-sans {
    font-family: @base_mono_sans_en, @monoSansFont !important;
}

.mdx-font-weight-bold-sans {
    font-weight: 900 !important;
}

// --------------------
// 衬线（文艺范）字体集
.mdx-font-title-serif {
    font-family: @serifTitle !important;
}

.mdx-font-subtitle-serif {
    font-family: @serifBoldFont !important;
}

.mdx-font-header-serif {
    font-family: @serifHeader !important;
}

.mdx-font-text-serif {
    font-family: @base_mono_serif_en, @serifFont;
    font-weight: @textFontWeight;
}

.mdx-font-tag-serif {
    font-family: @base_mono_sans_en, @serifBoldFont !important;
    font-weight: @textFontWeight;
}

.mdx-font-bold-serif {
    font-family: @base_mono_sans_en, @serifBoldFont !important;
}

.mdx-font-number-serif {
    font-family: @number_font, @base_mono_sans_en, @serifBoldFont !important;
}

.mdx-font-code-serif {
    font-family: @base_mono_sans_en, @monoSerifFont !important;
}

.mdx-font-weight-bold-serif {
    font-weight: bold !important;
}

// 聚光灯模式
.mdx-spotlight {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    pointer-events: none;
    z-index: 5000;
}

// 激光笔鼠标形状
.mdx-cursor-laser {
    cursor: url(""), auto !important;
}

// 过渡效果样式集
.mdx-transition-all {
    transition: all var(--vlook-transition-duration) ease-in-out;
}
.mdx-transition-box-shadow {
    transition: box-shadow var(--vlook-transition-duration) ease-in-out;
}
.mdx-transition-opacity {
    transition: opacity var(--vlook-transition-duration) ease-in-out;
}
.mdx-transition-left {
    transition: left var(--vlook-transition-duration) ease-in-out;
}
.mdx-transition-background {
    transition: background var(--vlook-transition-duration) ease-in-out;
}

.mdx-tool-tips,
.mdx-info-tips {
    // visibility: hidden;
    // opacity: 0;
    display: none;
    position: fixed;
    margin-left: auto;
    padding: 10px;
    text-align: center;
    white-space: pre-wrap;
    border-radius: var(--vlook-base-radius);
    border: 1px solid var(--tbl-border-color);
    font-family: @subtitleFont;
    font-weight: normal;
    color: var(--tips-bg-color-inset);
    background-color: var(--tips-bg-color);
    cursor: default;
    z-index: 3000;
}
.mdx-info-tips.error {
    color: #FFFFFF;
    border-color: var(--acc-color-red-light);
    background-color: var(--acc-color-red-light);
}

.mdx-tool-tips {
    visibility: hidden;
    opacity: 0;
    display: block;
    padding: 5px 10px;
    border-top: 0;
    box-shadow: 0 2px 0 0 @aLineColor inset, @buttonShadow, @contrastBorder;
    text-align: left;
    white-space: pre;
    font-size: 0.85em;
}

.mdx-tool-tips.accent {
    box-shadow: 0 2px 0 0 @buttonBgColor inset, @buttonShadow, @contrastBorder;
}

.mdx-tool-tips a,
.mdx-info-tips a {
    color: var(--tips-bg-color-inset) !important;
    font-weight: @fontWeight;
}

// 底部信息栏
.mdx-bottom-tips {
    font-family: @subtitleFont;
    font-weight: @fontWeight;
    color: #FFFFFF;
    width: 100%;
    height: 60px;
    text-align: center;
    bottom: 0;
    padding-top: 16px;
    background: linear-gradient(0deg, #000000, transparent);
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 5001;
}
.mdx-bottom-tips > div {
    bottom: 10px;
    width: 100%;
    position: fixed;
}
.mdx-bottom-tips kbd {
    color: #000000;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px #000000 inset;
    border: 2px solid var(--doc-bg-color-alt);
}

// 字体风格选择器
.mdx-font-styler {
    width: 630px;
    display: none;
    // visibility: hidden;
    // opacity: 0;
    position: fixed;
    padding: 10px;
    text-align: center;
    border-radius: var(--vlook-base-radius);
    border: 1px solid var(--tbl-border-color);
    font-family: @subtitleFont;
    font-weight: normal;
    color: var(--tips-bg-color-inset);
    background-color: var(--tips-bg-color);
    z-index: 3000;
}

// 字体风格选择器字体包下载提示
.mdx-font-styler-info {
    width: 100%;
    overflow: auto;
    border-radius: var(--vlook-small-radius);
}

// 字体风格选项：小清新
.mdx-fontstyle-sans {
    border-radius: var(--vlook-small-radius) !important;
    filter: opacity(0.6);
    cursor: pointer;
}

// 字体风格选项：文艺范
.mdx-fontstyle-serif {
    border-radius: var(--vlook-small-radius) !important;
    filter: opacity(0.6);
    cursor: pointer;
}

// 字体风格选项鼠标事件效果
.mdx-fontstyle-sans:hover,
.mdx-fontstyle-serif:hover {
    filter: opacity(1);
    box-shadow: 0 0 0 2px @aLineColor;
}
.mdx-fontstyle-sans:active,
.mdx-fontstyle-serif:active {
    box-shadow: 0 0 0 2px @aActiveColor;
}

// 当前选择的字体风格选项
.mdx-fontstyle-sans.selected,
.mdx-fontstyle-serif.selected {
    box-shadow: 0 0 0 4px var(--header-color) !important;
    filter: opacity(1) !important;
}

// 字体包信息
.mdx-fontinfo-sans,
.mdx-fontinfo-serif {
    margin-top: 10px;
    text-align: left;
    font-size: 0.9em;
}
// 字体包加载状态
.mdx-fontinfo-sans #fontset-sans-status,
.mdx-fontinfo-serif #fontset-serif-status {
    color: var(--fore-color-alt);
}

// 长内容扩展面板
.mdx-content-expander {
    font-family: @subtitleFont;
    font-weight: @fontWeight;
    height: 100px;
    margin-top: -120px;
    background: linear-gradient(0deg, var(--doc-bg-color) 10px, var(--doc-bg-color-transparent));
    border-radius: 0 0 var(--vlook-base-radius) var(--vlook-base-radius);
    position: absolute;
    text-align: center;
    vertical-align: bottom;
    visibility: hidden;
    // display: none;
    // cursor: pointer;
    z-index: 10;
}

.mdx-content-expander > .mdx-btn {
    margin-top: 70px;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 0.85em;
    border-radius: var(--vlook-small-radius);
    background-color: @buttonBgColor;
    // display: inline-flex;
}

// Light Mode 的文档图标（标签栏、收藏夹图标）
.mdx-doc-logo-light {
    margin-top: 30px;
    width: 100%;
    height: 80px;
    background-image: url(@themeLogoLight);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

// Dark Mode 的文档图标（标签栏、收藏夹图标）
.mdx-doc-logo-dark {
    display: none;
    margin-top: 30px;
    width: 100%;
    height: 80px;
    background-image: url(@themeLogoDark);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    background-position: top center;
}

.mdx-welcome-page {
    cursor: wait;
    position: fixed;
    color: @buttonForeColor;
    background: linear-gradient(@themeBgColorDark 0%, @buttonBgColor 50%, @buttonBgColor);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: @titleFont;
    font-size: 1.3em;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    z-index: 6000;
}

// 文本呼吸动画
@keyframes breathe-text {
    0% {
      opacity: 1;
      transform: scale(1.03);
    }
    100% {
      opacity: 0.8;
      transform: scale(0.99);
    }
}

// 按钮呼吸动画
@keyframes breathe-button {
    0% {
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(120%);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
        filter: brightness(100%);
    }
}

.mdx-welcome-page-tips {
    padding: 20px 20px 10px 20px;
    animation: 1s breathe-text infinite alternate;
}

.mdx-welcome-page-tips > div {
    text-align: center;
    line-height: 1;
    margin-bottom: 1em;
}

.mdx-welcome-page-loading {
    cursor: not-allowed;
    padding-left: 1em;
    padding-right: 1em;
    color: @themeForeColor;
    border: 1px solid @themeForeColorFade;
    font-family: @subtitleFont;
    font-weight: normal;
    display: inline-block;
    border-radius: var(--vlook-base-radius);
    margin-bottom: 2em;
}

.mdx-btn-welcome-page-done {
    cursor: pointer;
    // border: none;
    border: 2px solid @buttonForeHoverColor;
    font-size: 1.2em;
    font-weight: @fontWeight;
    color: @buttonForeHoverColor;
    background-color: @aLineColor;
    animation: 1s breathe-button 1 alternate;
}
.mdx-btn-welcome-page-done:hover {
    color: @aLineColor;
    background-color: @buttonForeHoverColor;
    box-shadow: @buttonShadow;
}
.mdx-btn-welcome-page-done:active {
    border: none;
    color: @buttonForeHoverColor;
    background-color: @aLineColor;
    box-shadow: 0 0 0 2px fade(@aLineColor, 50%);
    transform: none;
}

.mdx-btn-welcome-page-done.wait {
    animation: 1s breathe-button infinite alternate;
}

.mdx-btn-welcome-page-done > span {
    font-weight: normal;
}

// 用于段落导航
.mdx-pg-current-item {
    box-shadow: 0 0 10px 0 @aLineColor;
    border-radius: var(--vlook-base-radius);
}

// 水平滚动空间内更多内容的阴影
// .mdx-scroll-y-shadow {
//     position: absolute;
//     width: 20px;
//     height: 250px;
//     right: 20px;
//     margin: 2px 0;
//     background: linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,0.3));
// }

.md-diagram-panel svg {
    width: auto;
}
.mdx-figure {
    // cursor: pointer;
}

// 修正在 SVG 顺序图的下边界与 actor 无间隔问题
.md-diagram-panel svg[viewBox^="-"],
.mdx-figure-content svg[viewBox^="-"] {
    padding-bottom: 8px;
}

// .md-diagram-panel svg,
.mdx-figure-content svg:not([data-inject-url]) { // 跳过由 SVGInject 生成的 svg
    width: 100%;
}

.mdx-blockquote-folder {
    cursor: pointer;
}

.mdx-blockquote-folder.hover > svg > use {
    fill: @aHoverColor !important;
}
.mdx-blockquote-folder.hover:active > svg > use {
    fill: @aActiveColor !important;
}

.mdx-nav-center {
    background-color: var(--doc-bg-color-alt);
    border-radius: var(--vlook-base-radius);
    cursor: default;
    display: block;
    left: var(--vlook-nav-center-hidden-left);
    top: 10px;
    bottom: 40px;
    width: var(--vlook-nav-center-width);
    padding: 0;
    position: fixed;
    z-index: 2000;
    user-select: none;
}

.mdx-nav-center-float {
    top: 20px;
    bottom: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mdx-nav-center-block {
    top: 60px;
    bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--tbl-border-color) inset;
}

// 导航中心头部
.mdx-nav-center-header {
    color: @foreColorLight;
    font-family: @subtitleFont;
    font-weight: normal;
    height: 100px;
    padding: 0;
    background: linear-gradient(180deg, var(--doc-bg-color-alt) 90px, var(--doc-bg-color-alt-transparent));
    left: 1px;
    right: 1px;
    top: 1px;
    position: absolute;
    border-top-right-radius: var(--vlook-base-radius);
    border-top-left-radius: var(--vlook-base-radius);
    z-index: 10;
}

// 导航中心标签栏
.mdx-segment {
    text-align: center;
    height: 34px;
    border-radius: var(--vlook-small-radius);
    margin: 10px;
    padding: 2px;
    background-color: var(--blockquote-bg);
}
// 导航中心标签栏按钮
.mdx-segment > input[type="radio"] {
    display: none;
}
// .mdx-segment > input[type="radio"]:checked + .mdx-segment-btn {
//     background-color: var(--doc-bg-color);
// }
.mdx-segment > input[type="radio"]:checked+.mdx-segment-btn > svg > use {
    fill: var(--fore-color);
}

.mdx-segment-indicator {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 40px;
    height: 30px;
    background-color: var(--doc-bg-color);
    border-radius: calc(var(--vlook-small-radius) - 1px);
    z-index: 0;
}
.mdx-segment-indicator > svg > use {
    fill: var(--fore-color);
}

.mdx-segment-btn {
    width: 16%;
    height: 30px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    border-radius: calc(var(--vlook-small-radius) - 1px);
    float: left;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    z-index: 10;
}
.mdx-segment-btn.hover:hover {
    background-color: var(--blockquote-bg);
}
.mdx-segment-btn.hover:hover > svg > use {
    fill: var(--fore-color);
}
.mdx-segment-btn:active {
    background-color: var(--fore-color-alt);
    box-shadow: 0 0 0 2px var(--tbl-border-color);
}
.mdx-segment-btn:active > svg > use {
    fill: var(--doc-bg-color);
}
// 大纲索引 tab
.mdx-segment-btn.catalog {
    margin: 0 0.8% 0 0;
}
// 插图索引 tab
.mdx-segment-btn.figure {
    margin: 0 0.8% 0 0;
}
// 表格索引 tab
.mdx-segment-btn.table {
    margin: 0 0.8% 0 0;
}
// 多媒体索引 tab
.mdx-segment-btn.multimedia {
    margin: 0 0.8% 0 0;
}
// 代码块索引 tab
.mdx-segment-btn.codeblock {
    margin: 0 0.8% 0 0;
}
// 访问历史 tab
.mdx-segment-btn.history {
    margin: 0;
}

// .mdx-nav-center-title {
//     text-align: center;
//     position: absolute;
//     border-radius: var(--vlook-small-radius);
//     left: 10px;
//     right: 10px;
//     width: 336px !important;
//     display: inline-block;
//     padding-left: 10px;
//     padding-right: 10px;
//     text-overflow: ellipsis;
//     white-space: nowrap;
//     overflow: hidden;
//     font-family: @subtitleFont;
//     font-weight: @fontWeight;
//     color: var(--a-color);
//     cursor: pointer;
// }
// .mdx-nav-center-title-hover:hover {
//     background-color: var(--blockquote-bg);
// }

.mdx-nav-center-body {
    width: 100%;
    height: 100%;
    padding: 70px 1px 10px 1px;
    // padding: 0;
    // padding-top: 70px;
    // padding-bottom: 5px;
    border-radius: var(--vlook-base-radius);
    overflow: auto;
    overflow-y: hidden;
}

.mdx-toc-catalog-body {
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
    overflow-y: scroll;
}

.mdx-nav-center-footer {
    height: 30px;
    line-height: 40px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    text-align: center;
    padding: 0;
    background: linear-gradient(0deg, var(--doc-bg-color-alt) 10px, var(--doc-bg-color-alt-transparent));
    border-bottom-right-radius: var(--vlook-base-radius);
    border-bottom-left-radius: var(--vlook-base-radius);
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

.mdx-toc-handle {
    position: fixed;
    display: none;
    top: 390px;
    left: 8px;
    width: 4px;
    height: 80px;
    background-color: var(--tbl-border-color);
    border-radius: 2px;
    z-index: 2000;
    // transition: all var(--vlook-transition-duration) ease-in-out;
}
.mdx-toc-handle.hover {
    background-color: var(--fore-color);
}

.mdx-copyright {
    left: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    padding: 5px 10px;
    font-size: 0.85em;
    font-family: @subtitleFont;
    font-weight: normal;
    position: absolute;
}
.mdx-copyright,
.mdx-copyright a {
    color: #FFFFFF !important;
}

.mdx-float-card {
    box-shadow: @buttonShadow, @contrastBorder;
}

.mdx-foot-note-panel {
    position: fixed;
    left: 15%;
    right: 15%;
    bottom: 90px;
    height: 200px;
    border-radius: var(--vlook-base-radius);
    box-shadow: @buttonShadow;
    margin: 0 auto;
    background-color: var(--doc-bg-color-alt);
    // visibility: hidden;
    // opacity: 0;
    display: none;
    z-index: 2100;
}

.mdx-foot-note-panel > a {
    color: var(--fore-color);
}

.mdx-foot-note-panel-header {
    height: 30px;
    top: 2px;
    left: 2px;
    right: 2px;
    position: absolute;
    background: linear-gradient(180deg, var(--doc-bg-color-alt) 5px, var(--doc-bg-color-alt-transparent));
    border-radius: var(--vlook-base-radius);
}

.mdx-foot-note-panel-content {
    width: 100%;
    top: 2px;
    bottom: 2px;
    padding: 10px 20px;
    position: absolute;
    overflow-x: auto;
}

.mdx-foot-note-panel-all {
    font-weight: @fontWeight;
    height: 60px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    line-height: 70px;
    bottom: 0;
    padding: 0 20px;
    margin: 2px;
    border-radius: var(--vlook-base-radius);
    background: linear-gradient(0deg, var(--doc-bg-color-alt) 35px, var(--doc-bg-color-alt-transparent));
    position: absolute;
}

.mdx-more-doc-content-before {
    width: 100%;
    height: 60px;
    background: linear-gradient(180deg, var(--doc-bg-color), var(--doc-bg-color-transparent));
    position: fixed;
    top: 0;
    pointer-events: none;
    display: none;
    z-index: 99;
}
.mdx-more-doc-content-after {
    width: 100%;
    height: 60px;
    background: linear-gradient(0deg, var(--doc-bg-color), var(--doc-bg-color-transparent));
    position: fixed;
    bottom: 0;
    pointer-events: none;
    display: block;
    z-index: 99;
}

.mdx-toolbar {
    border-bottom-left-radius: var(--vlook-base-radius);
    border-bottom-right-radius: var(--vlook-base-radius);
    left: 20px;
    top: 10px;
    padding: 10px;
    width: var(--vlook-nav-center-width);
    height: 50px;
    position: fixed;
    background-color: @buttonBgColor;
    display: none;
    z-index: 100;
}
.mdx-toolbar.cover {
    width: auto;
    right: 20px;
    background: none;
}
// .mdx-toolbar.not-cover {
//     width: var(--vlook-nav-center-width);
//     background-color: @buttonBgColor;
//     top: 0;
//     padding-left: 10px;
//     padding-right: 10px;
// }

.mdx-toolbar-spliter {
    display: flex;
    width: 40px;
    height: 30px;
    padding: 0;
    float: right;
}

.mdx-toolbar-smallscreen {
    top: 50px;
    padding-left: 0;
    padding-right: 0;
}

.mdx-btn.outline {
    display: flex;
    justify-content: center;
    align-items: center;
    color: @docBgColorLight;
    cursor: pointer;
    float: left;
    // width: var(--vlook-toolbar-btn-space);
    height: 30px;
    padding-top: 0;
    text-align: center;
    visibility: visible;
}

.mdx-toc-item-current {
    font-weight: @titleFontWeight;
    color: @headerColor;
    background-color: var(--doc-bg-color);
    box-shadow: 0 0 0 2px @themeBgColorFade inset;
}

.mdx-toc-item-current::before {
    // color: @headerColor;
}

// .mdx-toc-item-current a {
// }

// .mdx-toc-item-current a::after {}

.mdx-toc-folder {
    color: @foreColorLightAlt;
    float: left;
    width: 20px;
    text-align: center;
}

.mdx-toc-folder.hover > svg > use {
    fill: @aHoverColor !important;
}
.mdx-toc-folder.hover:active > svg > use {
    fill: @buttonForeColor !important;
}

.mdx-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
    width: var(--vlook-toolbar-btn-width);
    height: 30px;
    border-radius: var(--vlook-small-radius);
}

// 按钮 pin 状态
.mdx-btn.selected {
    background-color: darken(@buttonBgColor, 20%) !important;
    box-shadow: @contrastBorder;
}
// .mdx-btn.selected > svg > use {
//     fill: var(--doc-bg-color);
// }

.mdx-btn.first {
    border-radius: var(--vlook-small-inner-radius) 0 0 var(--vlook-small-inner-radius) !important;
}
.mdx-btn.middle {
    border-radius: 0 !important;
}
.mdx-btn.last {
    border-radius: 0 var(--vlook-small-inner-radius) var(--vlook-small-inner-radius) 0 !important;
}

// .mdx-btn.hover {
//     transition: all var(--vlook-transition-duration) ease-in-out;
// }
.mdx-btn.hover:hover {
    background-color: @aHoverColor !important;
    color: @buttonForeHoverColor !important;
}

.mdx-btn.hover:hover > svg > use {
    fill: @buttonForeHoverColor;
}

.mdx-btn.float,
.mdx-btn-group.float {
    background-color: @buttonBgColor;
}

.mdx-btn:active {
    background-color: @aActiveColor !important;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    transition: none;
    z-index: 1;
}

// 音频资源加载中动画
@keyframes loading-circle {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
.mdx-audio-mini-control.loading {
    animation: loading-circle 2s linear infinite;
}

.mdx-audio-mini-control {
    // color: @buttonForeColor;
    background-color: @buttonBgColor;
    border-radius: var(--vlook-circle-radius);
    text-align: center;
    line-height: 30px;
    height: 30px;
    width: 30px;
    padding: 2px;
    // box-shadow: 0 0 1px fade(@buttonForeHoverColor, 70%);
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    display: inline-flex;
    cursor: pointer;
}

.mdx-audio-mini-control.disabled {
    // color: var(--fore-color);
    background-color: #B0B4B8;
    // border-radius: var(--vlook-circle-radius);
    // text-align: center;
    // line-height: 30px;
    // height: 30px;
    // width: 30px;
    // padding: 2px;
    // box-shadow: 0 0 1px fade(@buttonForeHoverColor, 70%);
    // display: inline-block;
    cursor: not-allowed;
}

// .mdx-audio-mini-control {
//     color: @buttonForeColor;
//     background-color: @buttonBgColor;
//     cursor: pointer;
// }

.mdx-audio-mini-control.hover:hover {
    background-color: @aHoverColor;
    box-shadow: @buttonShadow;
    color: @buttonForeHoverColor;
}

.mdx-audio-mini-control.hover:active {
    background-color: @aActiveColor;
}

.mdx-duration-info {
    color: var(--doc-bg-color);
    border-radius: 0 var(--vlook-tag-radius) var(--vlook-tag-radius) var(--vlook-tag-radius);
    padding: 0 5px;
    background-color: var(--fore-color-alt);
    font-weight: bold;
}

// 音频播放中状态
@keyframes breathe-circle {
    0% {
        box-shadow: 0 0 0 0 fade(@aHoverColor, 70%);
    }
    100% {
        box-shadow: 0 0 0 3px fade(@aHoverColor, 70%);
    }
}
.mdx-audio-mini-control.playing {
    animation: 500ms breathe-circle infinite alternate;
}

.mdx-chapter-nav {
    color: @buttonForeColor;
    background-color: @buttonBgColor;
    border-bottom-left-radius: var(--vlook-base-radius);
    border-bottom-right-radius: var(--vlook-base-radius);
    top: -50px;
    left: calc(~"var(--vlook-nav-center-width) + 50px");
    right: 20px;
    height: 50px;
    position: fixed;
    padding: 0;
    vertical-align: middle;
    z-index: 100;
    user-select: none;
    display: none;
}

.mdx-chapter-nav-prev {
    top: 0;
    left: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-left-radius: var(--vlook-base-radius);
}
// 无特效（effect=0）时使用的样式
.mdx-chapter-nav-prev.noeffect.hover {
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    // text-shadow: @buttonShadow;
    border-bottom-left-radius: var(--vlook-base-radius);
}
.mdx-chapter-nav-prev.effect.hover > svg > use,
.mdx-chapter-nav-prev.noeffect.hover > svg > use {
    fill: @buttonForeHoverColor;
}
.mdx-chapter-nav-prev.effect.hover > .mdx-chapter-nav-prev-text,
.mdx-chapter-nav-prev.noeffect.hover > .mdx-chapter-nav-prev-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-prev.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, @aHoverColor, @buttonBgColor);
    // border-top-left-radius: var(--vlook-base-radius);
    border-bottom-left-radius: var(--vlook-base-radius);
    opacity: 0;
    z-index: -1;
    transition: all var(--vlook-transition-duration) ease-in;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-prev.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.mdx-chapter-nav-prev.noeffect:active,
.mdx-chapter-nav-prev.effect:active,
.mdx-chapter-nav-prev.effect:active::before {
    background: linear-gradient(to right, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.mdx-chapter-nav-prev-text {
    top: 0;
    left: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-family: @subtitleFont;
    font-weight: normal;
    color: @buttonForeColor;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    display: block;
}

.mdx-chapter-nav-doc-title {
    font-family: @subtitleFont;
    font-size: 0.75em;
    font-weight: normal;
    text-align: center;
    line-height: 24px;
    margin-left: 200px;
    margin-right: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    height: 22px !important;
    cursor: pointer;
    display: block;
}
.mdx-chapter-nav-doc-title.in-start {
    margin-left: 15px;
    font-size: 1.25em;
    font-weight: @titleFontWeight;
    text-align: left;
    height: 50px !important;
    line-height: 50px;
    cursor: default;
}

.mdx-chapter-nav-current {
    font-family: @subtitleFont;
    // font-size: 1em;
    font-weight: @titleFontWeight;
    text-align: center;
    line-height: 22px;
    margin-left: 200px;
    margin-right: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    height: 28px;
    cursor: pointer;
    display: block;
}
.mdx-chapter-nav-doc-title.effect.hover,
.mdx-chapter-nav-current.effect.hover {
    color: @buttonForeHoverColor;
}

// 无特效（effect=0）时使用的样式
// .mdx-chapter-nav-doc-title.effect.hover,
.mdx-chapter-nav-doc-title.noeffect.hover,
// .mdx-chapter-nav-current.effect.hover,
.mdx-chapter-nav-current.noeffect.hover {
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    height: 28px;
    // text-shadow: @buttonShadow;
    color: @buttonForeHoverColor;
}

// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-doc-title.effect::before,
.mdx-chapter-nav-current.effect::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 28px;
    background: linear-gradient(90deg, fade(@aHoverColor, 0%), @aHoverColor, fade(@aHoverColor, 0%));
    opacity: 0;
    z-index: -1;
    transition: all 200ms ease-in;
}
.mdx-chapter-nav-doc-title.effect::before {
    top: 0;
    height: 22px;
}

// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-doc-title.effect.hover::before,
.mdx-chapter-nav-current.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.mdx-chapter-nav-doc-title.noeffect:active,
.mdx-chapter-nav-doc-title.effect:active,
.mdx-chapter-nav-doc-title.effect:active::before,
.mdx-chapter-nav-current.noeffect:active,
.mdx-chapter-nav-current.effect:active,
.mdx-chapter-nav-current.effect:active::before {
    background: linear-gradient(90deg, fade(desaturate(@aHoverColor, 30%), 0%), desaturate(@aHoverColor, 30%), fade(desaturate(@aHoverColor, 30%), 0%));
    box-shadow: none;
}

.mdx-chapter-nav-next {
    top: 0;
    right: 0;
    width: 20%;
    height: 50px;
    position: absolute;
    cursor: pointer;
    border-bottom-right-radius: var(--vlook-base-radius);
}
// 无特效（effect=0）时使用的样式
.mdx-chapter-nav-next.noeffect.hover {
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    // text-shadow: @buttonShadow;
    border-bottom-right-radius: var(--vlook-base-radius);
}
.mdx-chapter-nav-next.effect.hover > svg > use,
.mdx-chapter-nav-next.noeffect.hover > svg > use {
    fill: @buttonForeHoverColor;
}
.mdx-chapter-nav-next.noeffect.hover > .mdx-chapter-nav-next-text,
.mdx-chapter-nav-next.effect.hover > .mdx-chapter-nav-next-text {
    color: @buttonForeHoverColor;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-next.effect::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to left, @aHoverColor, @buttonBgColor);
    // border-top-right-radius: var(--vlook-base-radius);
    border-bottom-right-radius: var(--vlook-base-radius);
    opacity: 0;
    z-index: -1;
    transition: all 200ms ease-in;
}
// 有特效（effect>=1）时使用的样式
.mdx-chapter-nav-next.effect.hover::before {
    opacity: 1;
}
// 无特效（effect=0）时，有特效（effect>=1）时使用的样式
.mdx-chapter-nav-next.noeffect:active,
.mdx-chapter-nav-next.effect:active,
.mdx-chapter-nav-next.effect:active::before {
    background: linear-gradient(to left, desaturate(@aHoverColor, 30%), @buttonBgColor);
}

.mdx-chapter-nav-next-text {
    top: 0;
    right: 30px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-family: @subtitleFont;
    font-weight: normal;
    color: @buttonForeColor;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    display: block;
}

.mdx-btn.color-scheme {
    margin-left: var(--vlook-toolbar-btn-space);
    float: right;
}

.mdx-btn.font-style {
    margin-left: var(--vlook-toolbar-btn-space);
    float: right;
}

// .mdx-btn.table-cross {
//     margin-left: var(--vlook-toolbar-btn-space);
//     float: right;
// }

.mdx-btn.paragraph-nav {
    // margin-left: var(--vlook-toolbar-btn-space);
    // float: right;
}

.mdx-btn.spotlight {
    // margin-left: var(--vlook-toolbar-btn-space);
    // float: right;
}

.mdx-btn.laser-pointer {
    // margin-left: var(--vlook-toolbar-btn-space);
    // float: right;
}

.mdx-btn-group.prs {
    margin: 0;
    height: 30px;
    float: right;
    border-radius: var(--vlook-small-radius);
    margin-left: var(--vlook-toolbar-btn-space);
}

.mdx-btn-group.hover {
    background-color: darken(@buttonBgColor, 6%);
    box-shadow: @contrastBorder;
    // transition: all var(--vlook-transition-duration) ease-in-out;
}

// 辅助类按钮
.mdx-accent-btn {
    width: 40px;
    height: 30px;
    position: absolute;
    text-align: center;
    border-radius: var(--vlook-small-radius);
    box-shadow: 0 0 0 1px var(--tbl-border-color) inset;
    cursor: pointer;
}

.mdx-accent-btn > svg > use {
    fill: @buttonBgColor;
}

.mdx-accent-btn.hover:hover {
    background-color: var(--blockquote-bg);
}

.mdx-accent-btn:active {
    color: var(--doc-bg-color);
    background-color: var(--fore-color-alt);
    box-shadow: 0 0 0 2px var(--tbl-border-color);
}
.mdx-accent-btn:active > svg > use {
    fill: var(--doc-bg-color);
}

.mdx-accent-btn + .mdx-textfield {
  margin: 0 10px 0 0;
}

.mdx-accent-btn.figure-nav.disabled {
    cursor:not-allowed;
}
.mdx-accent-btn.figure-nav.disabled > svg > use {
    fill: var(--blockquote-bg);
}

// 输入框
.mdx-textfield {
    background-color: var(--doc-bg-color);
    border-radius: var(--vlook-small-radius);
    box-shadow: 0 0 0 1px var(--tbl-border-color) inset;
    margin: 0 10px 0 0;
    height: 30px;
    float: right;
}

.mdx-textfield.hover-action {
    // box-shadow: 0 0 0 2px @aHoverColor inset;
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%), 0 0 0 1px @aHoverColor inset;
}

.mdx-textfield-focus,
.mdx-textfield.hover-action {
    // box-shadow: 0 0 0 2px @buttonBgColor inset;
    box-shadow: 0 0 0 2px fade(@buttonBgColor, 50%), 0 0 0 1px @buttonBgColor inset;
}

// 输入框内的输入控件
.mdx-textfield > input {
    padding: 0;
    margin: 1px 0 0 10px;
    height: 28px;
    color: var(--fore-color);
    background-color: var(--doc-bg-color);
    border: 0;
    float: left;
    outline: 0 solid transparent;
}
.mdx-textfield > input.set-icon {
    margin-left: 0;
}

.mdx-textfield-icon {
    width: 30px;
    height: 30px;
    text-align: center;
    float: left;
}

// 输入框内的动作按钮
.mdx-textfield-action {
    width: 40px;
    height: 30px;
    text-align: center;
    border-radius: 0 var(--vlook-small-radius) var(--vlook-small-radius) 0;
    box-shadow: 1px 0 0 0 var(--blockquote-bg) inset;
    float: right;
}
.mdx-textfield-action.enabled {
    background-color: @buttonBgColor;
    box-shadow: none;
}
.mdx-textfield-action.enabled > svg > use {
  fill: @buttonForeColor;
  opacity: 1;
}
.mdx-textfield-action.hover:hover {
    background-color: @aHoverColor;
    cursor: pointer;
}
.mdx-textfield-action.hover:hover > svg > use {
    fill: @buttonForeHoverColor;
}
.mdx-textfield-action.hover:active {
    background-color: @aActiveColor;
}

.mdx-textfield-reset {
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    float: right;
    display: none;
    cursor: pointer;
}
.mdx-textfield-reset:hover > svg > use {
    opacity: 0.4;
}
.mdx-textfield-reset:active > svg > use {
    opacity: 0.6;
}

// tab 栏内按钮
// .mdx-accent-btn.cover,
.mdx-accent-btn.figure-nav {
    display: inline-block;
    margin: 0 10px 10px 10px;
}

// .mdx-toc-filter-catalog-result,
// .mdx-toc-filter-figure-result,
// .mdx-toc-filter-table-result,
// .mdx-toc-filter-multimedia-result,
// .mdx-toc-filter-codeblock-result,
.mdx-toc-filter-result,
.mdx-toc-history-result {
    display: none;
    width: 100%;
    height: 100%;
    padding: 30px 0 10px 0;
    overflow-y: scroll;
}

// .mdx-toc-filter-catalog-result > .mdx-toc-item,
// .mdx-toc-filter-figure-result > .mdx-toc-item,
// .mdx-toc-filter-table-result > .mdx-toc-item,
// .mdx-toc-filter-multimedia-result > .mdx-toc-item,
// .mdx-toc-filter-codeblock-result > .mdx-toc-item,
// .mdx-toc-history-result > .mdx-toc-item {
//     white-space: normal;
// }

.mdx-toc-history-none,
.mdx-toc-filter-result-none {
    display: block;
    line-height: 3;
    line-height: 3;
    padding: 0 10px;
    text-align: center;
    color: var(--fore-color-alt);
    font-family: @boldFont;
}

.mdx-toc-history-title {
    text-align: center;
    position: absolute;
    border-radius: var(--vlook-small-radius);
    left: 10px;
    right: 10px;
    // width: 336px !important;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    font-family: @subtitleFont;
    color: var(--a-color);
}

.mdx-btn.print {
    margin-left: var(--vlook-toolbar-btn-space);
    float: left;
}

.mdx-figure-nav {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // background-color: rgba(0, 0, 0, 0.6);
    // background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
    position: fixed;
    visibility: hidden;
    opacity: 0;
    z-index: 2200;
}

// 插图导航中的导航按钮
.mdx-figure-nav-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: @buttonForeColor;
    cursor: pointer;
    padding: 0;
}
// 插图导航中的上一插图按钮
.mdx-figure-nav-btns.prev {
    left: 10px;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: var(--vlook-base-radius);
    position: absolute;
    bottom: 10px;
}
// 插图导航中的下一插图按钮
.mdx-figure-nav-btns.next {
    right: 10px;
    top: auto;
    width: 30px;
    height: 70px;
    box-shadow: @contrastBorder;
    border-radius: var(--vlook-base-radius);
    position: absolute;
    bottom: 10px;
}

// .mdx-btn-figure-active {
//     fill: @aActiveColor !important;
// }

.mdx-btn-close-figure-nav {
    display: flex;
    justify-content: flex-end;
    vertical-align: middle;
    align-items: normal;
    color: #FFFFFF;
    cursor: pointer;
    background-color: @buttonBgColor;
    right: -2px;
    top: -2px;
    width: 50px;
    height: 50px;
    padding: 12px 12px 8px 8px;
    box-shadow: @contrastBorder;
    border-radius: 0 0 0 50px;
    position: absolute;
}

.mdx-btn-close-figure-nav:hover {
    background-color: @aHoverColor;
    box-shadow: @buttonShadow;
    transform: translate(-2px, 2px) ;
}

.mdx-btn-close-figure-nav:active {
    background-color: @aActiveColor;
    box-shadow: 0 0 0 2px fade(@aActiveColor, 50%) !important;
    box-shadow: none;
    transform: none;
}

.mdx-content-assistor {
    // display: none;
    visibility: hidden;
    opacity: 1;
    position: absolute;
    border-radius: var(--vlook-small-inner-radius);
    height: 26px;
    z-index: 50;
}

.mdx-btn.assistor {
    top: 0;
    width: 30px;
    height: 26px;
    border-radius: var(--vlook-small-inner-radius);
    background-color: @buttonBgColor;
    position: relative;
    display: none;
}
.mdx-btn.assistor.enabled {
    display: inline-flex;
}

.mdx-pic-in-pic {
    display: none;
    position: fixed;
    background-color: var(--header-color);
    border-radius: calc(var(--vlook-base-radius) + var(--vlook-base-radius) - var(--vlook-table-radius));
    // border-radius: var(--vlook-base-radius);
    right: 20px;
    bottom: 10px;
    padding: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--header-color) inset;
    z-index: 500;
}
.mdx-pic-in-pic > .mdx-content {
    overflow: auto;
    height: 100%;
    border-radius: var(--vlook-base-radius);
}
.mdx-pip-btn {
    position: absolute;
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
    background-color: var(--doc-bg-color);
    border-radius: 50%;
    top: 8px;
    // width: 24px;
    // height: 24px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    z-index: 20;
}
.mdx-pip-btn.min.zoom-in {
    top: 6px;
}
.mdx-pip-btn.min.zoom-out {
    top: 3px;
}

.mdx-pip-btn.mdx-close {
    right: 8px;
}

.mdx-pip-btn.mdx-zoom.zoom-in {
    right: 32px;
}
.mdx-pip-btn.mdx-zoom.zoom-out {
    right: 38px;
}

.mdx-pip-btn.zoom-in {
    width: 20px;
    height: 20px;
}
.mdx-pip-btn.zoom-out {
    width: 26px;
    height: 26px;
}

.mdx-pip-btn.zoom-in > svg {
    transform: scale(1);
}
.mdx-pip-btn.zoom-out > svg {
    transform: scale(1.33);
}
.mdx-pip-btn:hover > svg > use {
    fill: @aHoverColor;
}
.mdx-pip-btn:active > svg > use {
    fill: @aActiveColor;
}

.md-diagram-panel {
    border-radius: var(--vlook-base-radius);
    margin-bottom: 20px;
    padding: 0;
}

// .mdx-clickable.hover {
//     border-color: @aHoverColor !important;
// }

.mdx-interactive {
    cursor: pointer;
}
.mdx-interactive.hover {
    border-color: @aHoverColor !important;
}
.mdx-interactive.hover:active {
    box-shadow: 0 0 0 2px fade(@aHoverColor, 50%);
}
.mdx-interactive.hover:active {
    border-color: @aActiveColor !important;
    box-shadow: none;
    transform: none;
}

// 指定在 Dark Mode 时反转的图片样式
.mdx-img-invert-dark {
    background-color: #FFFFFF !important;
    filter: var(--vlook-invert-dark);
    border-color: @imgInvertInDarkBorderColor !important;
}

// 指定在 Dark Mode 时反转的图片的hover样式（先使用反色，这样在反转时则能保持与色一致）
// .mdx-img-invert-dark:hover {
//     border-color: rgb(255 - red(@aHoverColor),
//             255 - green(@aHoverColor),
//             255 - blue(@aHoverColor)) !important;
// }

// Light 模式的插图网格背景
.mdx-figure-solid-bg-light {
    background: @figureSolidBgLight ;
}
.mdx-figure-grid-line-light {
    background: url(@figureGridLineLight) !important;
}
.mdx-figure-grid-block-light {
    background: url(@figureGridBlockLight) !important;
}

// Dark Mode的插图网格背景
.mdx-figure-solid-bg-dark {
    background: @figureSolidBgDark;
}
.mdx-figure-grid-line-dark {
    background: url(@figureGridLineDark) !important;
}
.mdx-figure-grid-line-dark-invert {
    background: url(@figureGridLineDarkInvert) !important;
}
.mdx-figure-grid-block-dark {
    background: url(@figureGridBlockDark) !important;
}
.mdx-figure-grid-block-dark-invert {
    background: url(@figureGridBlockDarkInvert) !important;
}

.mdx-figure-content {
    margin: 5px;
    padding: 5px;
    display: table-cell;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    color: var(--fore-color);
}

.mdx-figure-nav-title {
    color: #C0C4C8 !important;
    left: 10px;
    top: 10px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.mdx-figure-page-num {
    border-radius: var(--vlook-small-radius);
    color: #FFFFFF;
    background-color: var(--fore-color-alt);
    padding-left: 4px;
    padding-right: 4px;
    font-size: 0.9em;
    font-family: @boldFont;
}

.mdx-caption {
    display: inline-block;
    border-radius: var(--vlook-base-radius);
    background-color: var(--doc-bg-color-alt);
    // margin-top: 1em;
}

.mdx-caption > p {
    color: var(--fore-color);
    font-size: 0.85em;
    font-family: @boldFont;
    font-weight: normal;
    margin: 5px 10px 5px 10px;
    width: auto !important;
}

.mdx-caption hr {
    border-bottom: 2px solid @foreColorLightAlt;
    margin: 0.5em auto;
}

.mdx-caption-container {
    border-radius: var(--vlook-base-radius);
    margin-bottom: 20px;
}

use.mdx-svg-ico-light {
    fill: @buttonForeColor;
}

use.mdx-svg-ico-dark {
    fill: var(--fore-color);
}

use.mdx-svg-ico-alpha {
    fill: var(--fore-color);
    opacity: 0.2;
}

use.mdx-svg-ico-theme {
    fill: var(--header-color);
}

use.mdx-svg-ico-alt {
    fill: var(--fore-color-alt);
}

// 折叠按钮样式
use.mdx-toc-folder-ico,
use.mdx-rowgroup-folder-ico,
use.mdx-blockquote-folder-ico {
    fill: @buttonBgColor;
}

// use.mdx-blockquote-folder-ico-hover {
//     fill: @aHoverColor;
// }
use.mdx-blockquote-folder-ico:active {
    fill: @aActiveColor;
}

// 遮罩样式
.mdx-mask {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    // visibility: hidden;
    // opacity: 0;
    display: none;
    z-index: 1000;
}
// 遮罩扩展样式
.mdx-mask.left {
    // background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    background: linear-gradient(90deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.mdx-mask.right {
    // background: linear-gradient(270deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    background: linear-gradient(270deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.mdx-mask.bottom {
    // background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
    background: linear-gradient(0deg, @themeBgColorDark 20%, fade(@themeBgColorDark, 50%));
}
.mdx-mask.center {
    // background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
    background: radial-gradient(ellipse, @themeBgColorDark 10%, fade(@themeBgColorDark, 50%));
}

// 遮罩关闭提示器样式
.mdx-mask-close {
    position: fixed;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    opacity: 0.7;
}
// 遮罩关闭提示器扩展样式
.mdx-mask-close.left {
    width: 16px;
    height: 60px;
}
.mdx-mask-close.right {
    width: 16px;
    height: 60px;
}
.mdx-mask-close.bottom {
    width: 60px;
    height: 16px;
}

.mdx-backdrop-blurs.enabled {
    // background: var(--backdrop-blurs-bg);
    backdrop-filter: saturate(180%) blur(15px);
    -webkit-backdrop-filter: saturate(180%) blur(15px);
}

// 彩虹引用
.mdx-quote-red,
.mdx-quote-orange,
.mdx-quote-yellow,
.mdx-quote-green,
.mdx-quote-cyan,
.mdx-quote-blue,
.mdx-quote-purple,
.mdx-quote-pink,
.mdx-quote-brown,
.mdx-quote-gray,
.mdx-quote-theme1,
.mdx-quote-theme2 {
    width: auto;
}
// red
.mdx-quote-red {
    background-color: var(--acc-color-red-fade);
}
.mdx-quote-red .mdx-std-code {
    background-color: var(--acc-color-red-alt);
}
.mdx-quote-red a {
    // border-color: var(--acc-color-red);
    // border-color: var(--doc-bg-color);
    border-color: @accColorRed;
}
.mdx-quote-red a:hover {
    // color: var(--acc-color-red) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorRed, 0.3) inset;
}
.mdx-quote-red a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-red);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorRed, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-red {
    color: var(--acc-color-red-title);
}
// .mdx-quote-title-red-light {
//     color: var(--acc-color-red);// !important;
// }
// orange
.mdx-quote-orange {
    background-color: var(--acc-color-orange-fade);
}
.mdx-quote-orange .mdx-std-code {
    background-color: var(--acc-color-orange-alt);
}
.mdx-quote-orange a {
    // border-color: var(--acc-color-orange);
    // border-color: var(--doc-bg-color);
    border-color: @accColorOrange;
}
.mdx-quote-orange a:hover {
    // color: var(--acc-color-orange) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorOrange, 0.3) inset;
}
.mdx-quote-orange a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-orange);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorOrange, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-orange {
    color: var(--acc-color-orange-title);
}
// .mdx-quote-title-orange-light {
//     color: var(--acc-color-orange);// !important;
// }
// yellow
.mdx-quote-yellow {
    background-color: var(--acc-color-yellow-fade);
}
.mdx-quote-yellow .mdx-std-code {
    background-color: var(--acc-color-yellow-alt);
}
.mdx-quote-yellow a {
    // border-color: var(--acc-color-yellow);
    // border-color: var(--doc-bg-color);
    border-color: @accColorYellow;
}
.mdx-quote-yellow a:hover {
    // color: var(--acc-color-yellow) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorYellow, 0.3) inset;
}
.mdx-quote-yellow a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-yellow);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorYellow, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-yellow {
    color: var(--acc-color-yellow-title);
}
// .mdx-quote-title-yellow-light {
//     color: var(--acc-color-yellow);// !important;
// }
// green
.mdx-quote-green {
    background-color: var(--acc-color-green-fade);
}
.mdx-quote-green .mdx-std-code {
    background-color: var(--acc-color-green-alt);
}
.mdx-quote-green a {
    // border-color: var(--acc-color-green);
    // border-color: var(--doc-bg-color);
    border-color: @accColorGreen;
}
.mdx-quote-green a:hover {
    // color: var(--acc-color-green) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorGreen, 0.3) inset;
}
.mdx-quote-green a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-green);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorGreen, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-green {
    color: var(--acc-color-green-title);
}
// .mdx-quote-title-green-light {
//     color: var(--acc-color-green);// !important;
// }
// cyan
.mdx-quote-cyan {
    background-color: var(--acc-color-cyan-fade);
}
.mdx-quote-cyan .mdx-std-code {
    background-color: var(--acc-color-cyan-alt);
}
.mdx-quote-cyan a {
    // border-color: var(--acc-color-cyan);
    // border-color: var(--doc-bg-color);
    border-color: @accColorCyan
}
.mdx-quote-cyan a:hover {
    // color: var(--acc-color-cyan) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorCyan, 0.3) inset;
}
.mdx-quote-cyan a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-cyan);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorCyan, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-cyan {
    color: var(--acc-color-cyan-title);
}
// .mdx-quote-title-cyan-light {
//     color: var(--acc-color-cyan);// !important;
// }
// blue
.mdx-quote-blue {
    background-color: var(--acc-color-blue-fade);
}
.mdx-quote-blue .mdx-std-code {
    background-color: var(--acc-color-blue-alt);
}
.mdx-quote-blue a {
    // border-color: var(--acc-color-blue);
    // border-color: var(--doc-bg-color);
    border-color: @accColorBlue;
}
.mdx-quote-blue a:hover {
    // color: var(--acc-color-blue) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorBlue, 0.3) inset;
}
.mdx-quote-blue a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-blue);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorBlue, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-blue {
    color: var(--acc-color-blue-title);
}
// .mdx-quote-title-blue-light {
//     color: var(--acc-color-blue);// !important;
// }
// purple
.mdx-quote-purple {
    background-color: var(--acc-color-purple-fade);
}
.mdx-quote-purple .mdx-std-code {
    background-color: var(--acc-color-purple-alt);
}
.mdx-quote-purple a {
    // border-color: var(--acc-color-purple);
    // border-color: var(--doc-bg-color);
    border-color: @accColorPurple;
}
.mdx-quote-purple a:hover {
    // color: var(--acc-color-purple) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorPurple, 0.3) inset;
}
.mdx-quote-purple a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-purple);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorPurple, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-purple {
    color: var(--acc-color-purple-title);
}
// .mdx-quote-title-purple-light {
//     color: var(--acc-color-purple);// !important;
// }
// pink
.mdx-quote-pink {
    background-color: var(--acc-color-pink-fade);
}
.mdx-quote-pink .mdx-std-code {
    background-color: var(--acc-color-pink-alt);
}
.mdx-quote-pink a {
    // border-color: var(--acc-color-pink);
    // border-color: var(--doc-bg-color);
    border-color: @accColorPink;
}
.mdx-quote-pink a:hover {
    // color: var(--acc-color-pink) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorPink, 0.3) inset;
}
.mdx-quote-pink a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-pink);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorPink, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-pink {
    color: var(--acc-color-pink-title);
}
// .mdx-quote-title-pink-light {
//     color: var(--acc-color-pink);// !important;
// }
// brown
.mdx-quote-brown {
    background-color: var(--acc-color-brown-fade);
}
.mdx-quote-brown .mdx-std-code {
    background-color: var(--acc-color-brown-alt);
}
.mdx-quote-brown a {
    // border-color: var(--acc-color-brown);
    // border-color: var(--doc-bg-color);
    border-color: @accColorBrown;
}
.mdx-quote-brown a:hover {
    // color: var(--acc-color-brown) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorBrown, 0.3) inset;
}
.mdx-quote-brown a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-brown);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorBrown, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-brown {
    color: var(--acc-color-brown-title);
}
// .mdx-quote-title-brown-light {
//     color: var(--acc-color-brown);// !important;
// }
// gray
.mdx-quote-gray {
    background-color: var(--acc-color-gray-fade);
}
.mdx-quote-gray .mdx-std-code {
    background-color: var(--acc-color-gray-alt);
}
.mdx-quote-gray a {
    // border-color: var(--acc-color-gray);
    // border-color: var(--doc-bg-color);
    border-color: @accColorGray;
}
.mdx-quote-gray a:hover {
    // color: var(--acc-color-gray) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@accColorGray, 0.3) inset;
}
.mdx-quote-gray a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-gray);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@accColorGray, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-gray {
    color: var(--acc-color-gray-title);
}
// .mdx-quote-title-gray-light {
//     color: var(--acc-color-gray);// !important;
// }
// theme1
.mdx-quote-theme1 {
    background-color: var(--acc-color-theme1-fade);
}
.mdx-quote-theme1 .mdx-std-code {
    background-color: var(--acc-color-theme1-alt);
}
.mdx-quote-theme1 a {
    // border-color: var(--acc-color-theme1);
    // border-color: var(--doc-bg-color);
    border-color: @theme1;
}
.mdx-quote-theme1 a:hover {
    // color: var(--acc-color-theme1) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@theme1, 0.3) inset;
}
.mdx-quote-theme1 a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-theme1);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@theme1, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-title-theme1 {
    color: var(--acc-color-theme1);
}
// .mdx-quote-title-theme1-light {
//     color: var(--header-color);// !important;
// }
// theme2
.mdx-quote-theme2 {
    background-color: var(--acc-color-theme2-fade);
}
.mdx-quote-theme2 a {
    // border-color: var(--acc-color-theme2);
    // border-color: var(--doc-bg-color);
    border-color: @theme2
}
.mdx-quote-theme2 a:hover {
    // color: var(--acc-color-theme2) !important;
    color: var(--fore-color) !important;
    box-shadow: 0 -0.3em 0 0 rgba(@theme2, 0.3) inset;
}
.mdx-quote-theme2 a:active {
    // color: var(--doc-bg-color) !important;
    // background-color: var(--acc-color-theme2);
    // box-shadow: 0 0 0 2px var(--doc-bg-color);
    background-color:var(--doc-bg-color-alt);
    box-shadow: 0 0 0 2px rgba(@theme2, 0.3);
    border-bottom: 0;
    border-radius: var(--vlook-small-radius);
}
.mdx-quote-theme2 .mdx-std-code {
    background-color: var(--acc-color-theme2-alt);
}
.mdx-quote-title-theme2 {
    color: var(--acc-color-theme2);
}
// .mdx-quote-title-theme2-light {
//     color: var(--acc-color-theme2);// !important;
// }
// .mdx-quote-title-red-dark,
// .mdx-quote-title-orange-dark,
// .mdx-quote-title-yellow-dark,
// .mdx-quote-title-green-dark,
// .mdx-quote-title-cyan-dark,
// .mdx-quote-title-blue-dark,
// .mdx-quote-title-purple-dark,
// .mdx-quote-title-pink-dark,
// .mdx-quote-title-brown-dark,
// .mdx-quote-title-gray-dark,
// .mdx-quote-title-theme1-dark,
// .mdx-quote-title-theme2-dark {
//     color: #FFFFFF !important;
// }

// 标签式公用样式（风格2）
.mdx-tag-red,
.mdx-tag-orange,
.mdx-tag-yellow,
.mdx-tag-green,
.mdx-tag-cyan,
.mdx-tag-blue,
.mdx-tag-purple,
.mdx-tag-pink,
.mdx-tag-brown,
.mdx-tag-gray,
.mdx-tag-theme1,
.mdx-tag-theme2 {
    font-family: @tagFont;
    font-weight: bold;
    font-size: 0.9em;
    color: @docBgColorLight;
    padding: 0.1em 0.5em;
    margin: 0 0.1em;
    // border-radius: var(--vlook-tag-small-radius) var(--vlook-tag-radius) var(--vlook-tag-radius) var(--vlook-tag-radius);
    white-space: pre;
    box-shadow: 0 0 0 1px var(--code-name-shadow-color) inset;
}

.mdx-tag-red {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-red) 0.5em, var(--acc-color-red) 100%);
}

.mdx-tag-orange {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-orange) 0.5em, var(--acc-color-orange) 100%);
}

.mdx-tag-yellow {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-yellow) 0.5em, var(--acc-color-yellow) 100%);
}

.mdx-tag-green {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-green) 0.5em, var(--acc-color-green) 100%);
}

.mdx-tag-cyan {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-cyan) 0.5em, var(--acc-color-cyan) 100%);
}

.mdx-tag-blue {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-blue) 0.5em, var(--acc-color-blue) 100%);
}

.mdx-tag-purple {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-purple) 0.5em, var(--acc-color-purple) 100%);
}

.mdx-tag-pink {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-pink) 0.5em, var(--acc-color-pink) 100%);
}

.mdx-tag-brown {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-brown) 0.5em, var(--acc-color-brown) 100%);
}

.mdx-tag-gray {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-gray) 0.5em, var(--acc-color-gray) 100%);
}

.mdx-tag-theme1 {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-theme1) 0.5em, var(--acc-color-theme1) 100%);
}

.mdx-tag-theme2 {
    background: linear-gradient(135deg, var(--fore-color) 0.5em, var(--acc-color-theme2) 0.5em, var(--acc-color-theme2) 100%);
}

// 药丸标签样式右边公共样式
.mdx-tag-name-red,
.mdx-tag-name-orange,
.mdx-tag-name-yellow,
.mdx-tag-name-green,
.mdx-tag-name-cyan,
.mdx-tag-name-blue,
.mdx-tag-name-purple,
.mdx-tag-name-pink,
.mdx-tag-name-brown,
.mdx-tag-name-gray,
.mdx-tag-name-theme1,
.mdx-tag-name-theme2 {
    font-family: @tagFont;
    font-weight: normal;
    margin-right: 0;
    border-radius: var(--vlook-tag-radius) 0 0 var(--vlook-tag-radius);
    color: var(--doc-bg-color);
    background: var(--code-name-bg-color);
    padding: 0.1em 0.5em 0.1em 0.5em;
    margin: 0 0.1em;
    font-size: 0.9em;
    white-space: pre;
    box-shadow: 0 0 0 1px var(--code-name-shadow-color) inset;
}

.mdx-tag-value-red,
.mdx-tag-value-orange,
.mdx-tag-value-yellow,
.mdx-tag-value-green,
.mdx-tag-value-cyan,
.mdx-tag-value-blue,
.mdx-tag-value-purple,
.mdx-tag-value-pink,
.mdx-tag-value-brown,
.mdx-tag-value-gray,
.mdx-tag-value-theme1,
.mdx-tag-value-theme2 {
    font-family: @tagFont;
    font-weight: bold;
    border-radius: 0 var(--vlook-tag-radius) var(--vlook-tag-radius) 0;
    color: @docBgColorLight;
    padding: 0.1em 0.5em;
    margin: 0 0.1em 0.1em -0.2em;
    box-shadow: 0 0 0 1px var(--code-name-shadow-color) inset;
    font-size: 0.9em;
    white-space: pre;
}

// 药丸标签样式
.mdx-tag-name-red {
}
.mdx-tag-value-red {
    background-color: var(--acc-color-red);
}

// 药丸标签样式
.mdx-tag-name-orange {
}
.mdx-tag-value-orange {
    background-color: var(--acc-color-orange);
}

// 药丸标签样式
.mdx-tag-name-yellow {
}
.mdx-tag-value-yellow {
    background-color: var(--acc-color-yellow);
}

// 药丸标签样式
.mdx-tag-name-green {
}
.mdx-tag-value-green {
    background-color: var(--acc-color-green);
}

// 药丸标签样式
.mdx-tag-name-cyan {
}
.mdx-tag-value-cyan {
    background-color: var(--acc-color-cyan);
}

// 药丸标签样式
.mdx-tag-name-blue {
}
.mdx-tag-value-blue {
    background-color: var(--acc-color-blue);
}

// 药丸标签样式
.mdx-tag-name-purple {
}
.mdx-tag-value-purple {
    background-color: var(--acc-color-purple);
}

// 药丸标签样式
.mdx-tag-name-pink {
}
.mdx-tag-value-pink {
    background-color: var(--acc-color-pink);
}

// 药丸标签样式
.mdx-tag-name-brown {
}
.mdx-tag-value-brown {
    background-color: var(--acc-color-brown);
}

// 药丸标签样式
.mdx-tag-name-gray {
}
.mdx-tag-value-gray {
    background-color: var(--acc-color-gray);
}

// 药丸标签样式
.mdx-tag-name-theme1 {
}
.mdx-tag-value-theme1 {
    background-color: var(--acc-color-theme1);
}

// 药丸标签样式
.mdx-tag-name-theme2 {
}
.mdx-tag-value-theme2 {
    background-color: var(--acc-color-theme2);
}

// 注音
// ruby,
rp,
rt {
    font-family: @boldFont;
    font-weight: normal;
    opacity: 0.6;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
rt:hover {
    color: @aHoverColor;
    opacity: 1;
    box-shadow: 0 -0.4em 0 0 fade(@aLineColor, 30%) inset;
    border-bottom: @aBorderWidth solid fade(@aLineColor, 30%);
    transform-origin: center bottom;
    transform: scale(1.5);
    cursor: pointer;
}

// 黑幕
.mdx-black-curtain {
    text-shadow: 0px 1px var(--fore-color);
    box-shadow: none;
    color: var(--doc-bg-color);
    font-size: 1em;
    font-family: @codeFont !important;
    font-weight: @fontWeight;
    cursor: pointer;
}
.mdx-black-curtain:hover {
    box-shadow: 0 0 0 1px @aLineColor, 0 2px 0 0 @aLineColor inset !important;
    display:inline-block;
    transform: scale(1.2);
}
.mdx-black-curtain-opened {
    box-shadow: 0 0 0 1px var(--fore-color), 0 2px 0 0 var(--fore-color) inset;
    background: var(--doc-bg-color) !important;
    text-shadow: none;
}

// h6 内的 code 标签强制取消加粗
h6 code {
    font-weight: normal;
}

/**************************************
* 封面、封底
**************************************/

// 无标准封面时的封面样式
.mdx-doc-title {
    color: @headerColor;
    font-size: 2.5em;
    font-family: @titleFont;
    font-weight: @titleFontWeight;
    line-height: 1.3 !important;
    padding-top: 70px;
    opacity: 0.5;
}

// 封面：#write 下 H6 作为第一个元素时
#write > pre.md-meta-block:first-child + h6, // 有 YAML 的情况
#write > h6:first-child, // 无 YAML 的情况
// 封底：#write 下 H6 作为最后一个元素时
#write > h6:last-child {
    display: block;
    color: @coverTextColor !important;
    font-size: 2.5em;
    font-family: @titleFont;
    font-weight: @titleFontWeight;
    text-align: @coverTextAlign;
    filter: var(--vlook-brightness-dark);
    height: 950px;//25cm;
    padding: @coverTextPadding;
    margin: 0 0 3em;
    border: 0;
    border-radius: var(--vlook-base-radius);
    box-shadow: @contrastBorderForCover;
    background-color: @coverBackgroundColor;
    background-image: @coverBackgroundImage;
    background-size: @coverBackgroundSize;
    background-repeat: @coverBackgroundRepeat;
    background-position: @coverBackgroundPosition;
    line-height: 1.3 !important;
}

// 封底样式微调
#write > h6:last-child {
    height: 550px;//14cm;
    margin-top: 3em;
    margin-bottom: 10px;
    padding: @backCoverTextPadding;
    color: @backCoverTextColor !important;
    text-align: @backCoverTextAlign;
    background-color: @backCoverBackgroundColor;
    background-image: @backCoverBackgroundImage;
    background-size: @backCoverBackgroundSize;
    background-repeat: @backCoverBackgroundRepeat;
    background-position: @backCoverBackgroundPosition;
}

// 封面内下标信息
#write > pre.md-meta-block:first-child + h6 sub,
#write > h6:first-child sub {
    color: @coverSubColor;
    font-family: @subtitleFont;
    font-weight: @fontWeight;
}

// 封面内上标信息
#write > pre.md-meta-block:first-child + h6 sup,
#write > h6:first-child sup {
    color: @coverSupColor;
    font-family: @subtitleFont;
    font-weight: @fontWeight;
}

// 封面内密级信息
#write > pre.md-meta-block:first-child + h6 code,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-red,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-orange,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-yellow,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-green,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-cyan,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-blue,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-purple,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-pink
#write > pre.md-meta-block:first-child + h6 .mdx-tag-brown,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-gray,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-red,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-orange,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-yellow,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-green,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-cyan,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-blue,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-purple,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-pink,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-brown,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-name-gray,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-red,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-orange,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-yellow,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-green,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-cyan,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-blue,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-purple,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-pink,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-brown,
#write > pre.md-meta-block:first-child + h6 .mdx-tag-value-gray,
#write > h6:first-child code,
#write > h6:first-child .mdx-tag-red,
#write > h6:first-child .mdx-tag-orange,
#write > h6:first-child .mdx-tag-yellow,
#write > h6:first-child .mdx-tag-green,
#write > h6:first-child .mdx-tag-cyan,
#write > h6:first-child .mdx-tag-blue,
#write > h6:first-child .mdx-tag-purple,
#write > h6:first-child .mdx-tag-pink
#write > h6:first-child .mdx-tag-brown,
#write > h6:first-child .mdx-tag-gray,
#write > h6:first-child .mdx-tag-name-red,
#write > h6:first-child .mdx-tag-name-orange,
#write > h6:first-child .mdx-tag-name-yellow,
#write > h6:first-child .mdx-tag-name-green,
#write > h6:first-child .mdx-tag-name-cyan,
#write > h6:first-child .mdx-tag-name-blue,
#write > h6:first-child .mdx-tag-name-purple,
#write > h6:first-child .mdx-tag-name-pink,
#write > h6:first-child .mdx-tag-name-brown,
#write > h6:first-child .mdx-tag-name-gray,
#write > h6:first-child .mdx-tag-value-red,
#write > h6:first-child .mdx-tag-value-orange,
#write > h6:first-child .mdx-tag-value-yellow,
#write > h6:first-child .mdx-tag-value-green,
#write > h6:first-child .mdx-tag-value-cyan,
#write > h6:first-child .mdx-tag-value-blue,
#write > h6:first-child .mdx-tag-value-purple,
#write > h6:first-child .mdx-tag-value-pink,
#write > h6:first-child .mdx-tag-value-brown,
#write > h6:first-child .mdx-tag-value-gray {
    font-size: 0.5em !important;
}

// 封面内的作者信息
#write > pre.md-meta-block:first-child + h6 strong,
#write > pre.md-meta-block:first-child + h6 strong::before,
#write > h6:first-child strong,
#write > h6:first-child strong::before {
    color: @coverAuthorColor;
    font-size: 0.6em !important;
    font-family: @subtitleFont;
    font-weight: normal !important;
}

// 作者信息前缀
#write > pre.md-meta-block:first-child + h6 strong::before,
#write > h6:first-child strong::before {
    content: "By ";
}

// 封面内的版权信息
#write > pre.md-meta-block:first-child + h6 em,
#write > h6:first-child em {
    color: @coverOwnerColor;
    font-size: 0.4em;
    font-family: @subtitleFont;
    font-weight: @fontWeight;
    font-style: normal !important;
}

// ---------------
// 针对大于该分辨设备的 UI 调整
@media screen and (min-height: 801px) {
    // 工具栏、逐章导航栏不在封面显示时的样式
    :root {
        --vlook-top-margin:-3px;
    }
    .mdx-toolbar.mdx-float-card,
    .mdx-chapter-nav.mdx-float-card {
        top: 10px !important;
        border-top-left-radius: var(--vlook-base-radius);
        border-top-right-radius: var(--vlook-base-radius);
    }

    .mdx-chapter-nav-prev.noeffect.hover,
    .mdx-chapter-nav-prev.effect.hover,
    .mdx-chapter-nav-prev.effect::before {
        border-top-left-radius: var(--vlook-base-radius);
    }

    .mdx-chapter-nav-next.noeffect.hover,
    .mdx-chapter-nav-next.effect::before,
    .mdx-chapter-nav-next.effect.hover {
        border-top-right-radius: var(--vlook-base-radius);
    }

    // 导航中心占位方式时高度
    .mdx-nav-center-block {
        top: 70px;
    }
}

// ---------------
// 针对大于该分辨设备的 UI 调整
@media screen and (min-width: 1441px) {
    :root {
        --vlook-nav-center-width:400px;
        --vlook-nav-center-hidden-left:-410px;
        --vlook-toolbar-btn-width:40px;
    }

    html {
        // font-size: @fontSizeBigger;
        // zoom: 1.125 !important;
    }
}

// ---------------
// 针对小于该分辨设备的 UI 调整
@media screen and (max-width: 1024px) {
    // 逐章导航UI
    .mdx-chapter-nav {
        left: 20px !important;
    }
    .mdx-chapter-nav-doc-title,
    .mdx-chapter-nav-current {
        margin-left: 40px !important;
        margin-right: 40px !important;
    }
    .mdx-chapter-nav-prev,
    .mdx-chapter-nav-next {
        width: 20% !important;
    }
    .mdx-chapter-nav-prev-text,
    .mdx-chapter-nav-next-text {
        display: none !important;
    }
    // 取消自动换行
    table {
        white-space: pre !important;
    }

    // 页面第1个H6为封面样式
    #write > pre.md-meta-block:first-child + h6,
    #write > h6:first-child,
    // 页面最后1个H6为封底样式
    #write > h6:last-child {
        font-size: 2em !important;
    }
}

// 针对超大屏手机、iPad 等设备的 UI 调整
@media screen and (min-width: 641px) and (max-width: 1023px) {
    .mdx-welcome-page {
        font-size: 1.2em !important;
    }
}

// 针对大屏手机的 UI 调整
@media screen and (min-width: 361px) and (max-width: 639px) {
    .mdx-welcome-page {
        font-size: 1.1em !important;
    }
}

// 针对中小屏手机的 UI 调整
@media screen and (max-width: 360px) {
    .mdx-welcome-page {
        font-size: 1em !important;
    }
}

// ---------------
// 针对不的 DRP
@media  (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    // 为减少主题包大小，先不启用
    // .mdx-img-lost {
    //     background-image: url("") !important;
    // }
}

// ---------------
// 针对打印的配置
@media print {
    html {
        font-size: 1em !important;
        // zoom: 1 !important;
    }

    #write {
        margin: 20px !important;
    }

    .mdx-doc-title {
        opacity: 1;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        box-shadow: none !important;
        background: none !important;
    }

    .mdx-table-cross {
        box-shadow: none !important;
        background: none !important;
    }

    table:hover {
        border-color: var(--tbl-border-color) !important;
    }

    .mdx-caption:hover {
        background-color: var(--doc-bg-color-alt);
    }

    .mdx-img-invert-dark {
        filter: none;
    }

    blockquote {
        display: block !important;
    }

    .mdx-welcome-page,
    .mdx-tool-tips,
    .mdx-info-tips,
    .mdx-bottom-tips,
    .mdx-more-doc-content-before,
    .mdx-more-doc-content-after,
    .mdx-link-error-list,
    .mdx-btn-open-in-new-tab,
    .mdx-toc-handle,
    .mdx-toolbar,
    .mdx-btn-outline,
    .mdx-chapter-nav,
    .mdx-nav-center,
    .mdx-nav-center-header,
    .mdx-nav-center-body,
    .mdx-status-bar {
        // .mdx-link-chk-result {
        display: none !important;
        filter: none;
    }

    .mdx-pg-current-item {
        box-shadow: none !important;
    }

    // 显示原始的目录
    #write .md-toc {
        display: block !important;
    }

    // 清空当前章节的样式
    .mdx-toc-item-current {
        background: none !important;
    }
    .mdx-toc-item-current a {
        color: var(--fore-color) !important;
    }

    .mdx-toc {
        display: block !important;
        visibility: visible !important;
    }

    #write > pre.md-meta-block:first-child + h6,
    #write > h6:first-child,
    #write > h6:last-child,
    #write > pre.md-meta-block:first-child + h6 sub,
    #write > h6:first-child sub,
    #write > pre.md-meta-block:first-child + h6 sup,
    #write > h6:first-child sup,
    #write > pre.md-meta-block:first-child + h6 strong,
    #write > pre.md-meta-block:first-child + h6 strong::before,
    #write > pre.md-meta-block:first-child + h6 em,
    #write > h6:first-child strong,
    #write > h6:first-child strong::before,
    #write > h6:first-child em {
        background: #FFFFFF none !important;
        color: @foreColorLight !important;
    }
}

.mdx-color-scheme {
    color: #FFFFFF;
}
// 结束针对打印的配置
// --------------------

// 针对 Dark Mode的配置
@media (prefers-color-scheme: dark) {
    .mdx-color-scheme {
        color: #000000;
    }
        :root {
        --vlook-color-scheme: dark;
        --vlook-invert-dark: invert(1) brightness(90%); // Dark Mode下图片滤镜
        --vlook-brightness-dark: brightness(90%); // Dark Mode下封面、封底滤镜

        // --------------------
        // Typora UI 颜色变量
        --bg-color: var(--doc-bg-color-dark);
        --side-bar-bg-color: var(--doc-bg-color-dark);
        --text-color: var(--fore-color-dark);

        --select-text-bg-color: @themeBgColorFade;

        --control-text-color: var(--fore-color-dark);
        --control-text-hover-color: var(--fore-color-dark);
        --window-border: 1px solid var(--doc-bg-color-alt-dark);

        --active-file-bg-color:  var(--doc-bg-color-dark);
        --active-file-border-color: var(--select-text-bg-color);
        --active-file-text-color: var(--fore-color-dark);

        --item-hover-bg-color: var(--fore-color-alt-dark);
        --item-hover-text-color: var(--fore-color-dark);

        --primary-color: @themeBgColor;

        --rawblock-edit-panel-bd: var(--doc-bg-color-dark);

        --search-select-bg-color: @themeBgColorFade;

        // --------------------
        // 颜色变量
        --doc-bg-color: var(--doc-bg-color-dark);
        --doc-bg-color-alt: var(--doc-bg-color-alt-dark);
        --doc-bg-color-transparent: var(--doc-bg-color-transparent-dark);
        --doc-bg-color-alt-transparent: var(--doc-bg-color-alt-transparent-dark);
        --fore-color: var(--fore-color-dark);
        --fore-color-alt: var(--fore-color-alt-dark);

        // --backdrop-blurs-bg : var(--backdrop-blurs-bg-dark);

        --blockquote-color: var(--blockquote-color-dark);
        --blockquote-bg: var(--blockquote-bg-dark);
        --tips-bg-color: var(--tips-bg-color-dark);
        --tips-bg-color-inset: var(--tips-bg-color-inset-dark);
        --a-color: var(--a-color-dark);
        --mark-color: var(--mark-color-dark);
        --tbl-header-color: var(--tbl-header-color-dark);
        --tbl-border-color: var(--tbl-border-color-dark);
        --tbl-th-bg-color: var(--tbl-th-bg-color-dark);
        --tbl-td-bg-color: var(--tbl-td-bg-color-dark);
        --tbl-cell-border-color: var(--tbl-cell-border-color-dark);
        --tbl-row-g-alpha: var(--tbl-row-g-alpha-dark);
        --del-color: var(--del-color-dark);
        --toc-header-num-color: var(--toc-header-num-color-dark);
        --header-color: var(--header-color-dark);
        --header-box-shadow: var(--header-box-shadow-dark);
        --header-bg-start-color: var(--header-bg-start-color-dark);
        --header-bg-end-color: var(--header-bg-end-color-dark);
        --code-bg-color: var(--code-bg-color-dark);
        --code-name-bg-color: var(--code-name-bg-color-dark);
        --code-name-shadow-color: var(--code-name-shadow-color-dark);

        --acc-color-red: var(--acc-color-red-dark);
        --acc-color-red-alt: var(--acc-color-red-alt-dark);
        --acc-color-red-fade: var(--acc-color-red-fade-dark);
        --acc-color-red-title: var(--acc-color-red-title-dark);
        --acc-color-orange: var(--acc-color-orange-dark);
        --acc-color-orange-alt: var(--acc-color-orange-alt-dark);
        --acc-color-orange-fade: var(--acc-color-orange-fade-dark);
        --acc-color-orange-title: var(--acc-color-orange-title-dark);
        --acc-color-yellow: var(--acc-color-yellow-dark);
        --acc-color-yellow-alt: var(--acc-color-yellow-alt-dark);
        --acc-color-yellow-fade: var(--acc-color-yellow-fade-dark);
        --acc-color-yellow-title: var(--acc-color-yellow-title-dark);
        --acc-color-green: var(--acc-color-green-dark);
        --acc-color-green-alt: var(--acc-color-green-alt-dark);
        --acc-color-green-fade: var(--acc-color-green-fade-dark);
        --acc-color-green-title: var(--acc-color-green-title-dark);
        --acc-color-cyan: var(--acc-color-cyan-dark);
        --acc-color-cyan-alt: var(--acc-color-cyan-alt-dark);
        --acc-color-cyan-fade: var(--acc-color-cyan-fade-dark);
        --acc-color-cyan-title: var(--acc-color-cyan-title-dark);
        --acc-color-blue: var(--acc-color-blue-dark);
        --acc-color-blue-alt: var(--acc-color-blue-alt-dark);
        --acc-color-blue-fade: var(--acc-color-blue-fade-dark);
        --acc-color-blue-title: var(--acc-color-blue-title-dark);
        --acc-color-purple: var(--acc-color-purple-dark);
        --acc-color-purple-alt: var(--acc-color-purple-alt-dark);
        --acc-color-purple-fade: var(--acc-color-purple-fade-dark);
        --acc-color-purple-title: var(--acc-color-purple-title-dark);
        --acc-color-pink: var(--acc-color-pink-dark);
        --acc-color-pink-alt: var(--acc-color-pink-alt-dark);
        --acc-color-pink-fade: var(--acc-color-pink-fade-dark);
        --acc-color-pink-title: var(--acc-color-pink-title-dark);
        --acc-color-brown: var(--acc-color-brown-dark);
        --acc-color-brown-alt: var(--acc-color-brown-alt-dark);
        --acc-color-brown-fade: var(--acc-color-brown-fade-dark);
        --acc-color-brown-title: var(--acc-color-brown-title-dark);
        --acc-color-gray: var(--acc-color-gray-dark);
        --acc-color-gray-alt: var(--acc-color-gray-alt-dark);
        --acc-color-gray-fade: var(--acc-color-gray-fade-dark);
        --acc-color-gray-title: var(--acc-color-gray-title-dark);
        --acc-color-theme1: var(--acc-color-theme1-dark);
        --acc-color-theme1-alt: var(--acc-color-theme1-alt-dark);
        --acc-color-theme1-fade: var(--acc-color-theme1-fade-dark);
        --acc-color-theme1-title: var(--acc-color-theme1-title-dark);
        --acc-color-theme2: var(--acc-color-theme2-dark);
        --acc-color-theme2-alt: var(--acc-color-theme2-alt-dark);
        --acc-color-theme2-fade: var(--acc-color-theme2-fade-dark);
        --acc-color-theme2-title: var(--acc-color-theme2-title-dark);

        --mm-color-red: var(--mm-color-red-dark);
        --mm-color-red-alt: var(--mm-color-red-alt-dark);
        --mm-color-orange: var(--mm-color-orange-dark);
        --mm-color-orange-alt: var(--mm-color-orange-alt-dark);
        --mm-color-yellow: var(--mm-color-yellow-dark);;
        --mm-color-yellow-alt: var(--mm-color-yellow-alt-dark);
        --mm-color-green: var(--mm-color-green-dark);
        --mm-color-green-alt: var(--mm-color-green-alt-dark);
        --mm-color-cyan: var(--mm-color-cyan-dark);
        --mm-color-cyan-alt: var(--mm-color-cyan-alt-dark);
        --mm-color-blue: var(--mm-color-blue-dark);
        --mm-color-blue-alt: var(--mm-color-blue-alt-dark);
        --mm-color-purple: var(--mm-color-purple-dark);
        --mm-color-purple-alt: var(--mm-color-purple-alt-dark);
        --mm-color-pink: var(--mm-color-pink-dark);
        --mm-color-pink-alt: var(--mm-color-pink-alt-dark);
        --mm-color-brown: var(--mm-color-brown-dark);
        --mm-color-brown-alt: var(--mm-color-brown-alt-dark);
        --mm-color-gray: var(--mm-color-gray-dark);
        --mm-color-gray-alt: var(--mm-color-gray-alt-dark);
        --cm-keyword: var(--cm-keyword-dark);
        --cm-variable: var(--cm-variable-dark);
        --cm-variable-2: var(--cm-variable-2-dark);
        --cm-variable-3: var(--cm-variable-3-dark);
        --cm-tag: var(--cm-tag-dark);
        --cm-attribute: var(--cm-attribute-dark);
        --cm-CodeMirror-cursor: var(--cm-CodeMirror-cursor-dark);
        --cm-string: var(--cm-string-dark);
        --cm-string-2: var(--cm-string-2-dark);
        --cm-comment: var(--cm-comment-dark);
        --cm-header: var(--cm-header-dark);
        --cm-quote: var(--cm-quote-dark);
        --cm-hr: var(--cm-hr-dark);
        --cm-link: var(--cm-link-dark);
        --cm-negative: var(--cm-negative-dark);
        --cm-positive: var(--cm-positive-dark);
        --cm-meta: var(--cm-meta-dark);
        --cm-bulidin: var(--cm-buliddark);
        --cm-bracket: var(--cm-bracket-dark);
        --cm-atom: var(--cm-atom-dark);
        --cm-number: var(--cm-atom-dark);
    }

    // 图片 URL 参数指定是否使用网格背景
    img[src*="grid=line"] {
        background: url(@figureGridLineDark);
    }
    img[src*="grid=block"] {
        background: url(@figureGridBlockDark);
    }

    // 图片URL参数指定在 Dark Mode时反色
    img[src*="darksrc=invert"] {
        filter: var(--vlook-invert-dark);
        border-color: @imgInvertInDarkBorderColor !important;
        // 使用反色后的背景，以适应在反色中显示为正常效果
        background: @figureSolidBgLight;
    }
    img[src*="darksrc=invert"][src*="grid=line"] {
        background: url(@figureGridLineDarkInvert);
    }
    img[src*="darksrc=invert"][src*="grid=block"] {
        background: url(@figureGridBlockDarkInvert);
    }

    // Dark Mode的彩虹引用内的 6 级标题
    // .mdx-quote-title-red,
    // .mdx-quote-title-orange,
    // .mdx-quote-title-yellow,
    // .mdx-quote-title-green,
    // .mdx-quote-title-cyan,
    // .mdx-quote-title-blue,
    // .mdx-quote-title-purple,
    // .mdx-quote-title-pink,
    // .mdx-quote-title-brown,
    // .mdx-quote-title-gray,
    // .mdx-quote-title-theme1,
    // .mdx-quote-title-theme2 {
    //     color: #FFFFFF;
    // }
}

:root {
    --mm-font-family: @boldFont !important;
    --mm-alt-font-family: @boldFont !important;
}
